/* ============================================================================
     ESTILOS. Puedes tocar colores aquí sin miedo, están todos agrupados.
     ============================================================================ */
  #orticoin-app {
    background: #FFFFFF;
    color: #1F2A1F;
    font-family: Georgia, "Times New Roman", serif;
    padding: 28px 20px 40px;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  #orticoin-app * { box-sizing: border-box; }
  #orticoin-app .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
  #orticoin-app .header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 26px;
  }
  #orticoin-app .brand { display: flex; gap: 16px; align-items: center; }
  #orticoin-app h1 { font-size: 32px; margin: 0; letter-spacing: 1px; font-weight: 700; }
  #orticoin-app .subtitle { color: #8A7F63; font-size: 13px; letter-spacing: 0.5px; }
  #orticoin-app .stats { display: flex; gap: 22px; flex-wrap: wrap; }
  #orticoin-app .stat-label {
    color: #8A7F63; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  }
  #orticoin-app .stat-value { font-weight: 700; font-size: 15px; }
  #orticoin-app .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
  #orticoin-app .price { font-size: 42px; font-weight: 700; }
  #orticoin-app .change {
    font-size: 15px; font-weight: 700; border-radius: 8px; padding: 3px 10px;
  }
  #orticoin-app .change.up { color: #2F6B3C; background: #E4EEDD; }
  #orticoin-app .change.down { color: #B23A2E; background: #F5E1DC; }
  #orticoin-app .tabs { display: flex; gap: 6px; margin-bottom: 16px; }
  #orticoin-app .tab {
    border: 1px solid #E7DFC9; cursor: pointer; font-size: 13px;
    padding: 7px 16px; border-radius: 8px; background: #FFFFFF; color: #5B5340;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  }
  #orticoin-app .tab.active { background: #2F6B3C; color: #FFFFFF; border-color: #2F6B3C; font-weight: 700; }
  #orticoin-app .tab-spacer { flex: 1; }
  #orticoin-app .tab.proj {
    border: 1px solid #C9A227; background: #FBEEC8; color: #6B5310; font-weight: 700;
    box-shadow: 0 2px 0 rgba(138,106,31,0.25);
  }
  #orticoin-app .tab.proj:hover { background: #F5E2A0; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(138,106,31,0.3); }
  #orticoin-app .tab.proj:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(138,106,31,0.25); }
  #orticoin-app .tab.proj.active { background: #8A6A1F; border-color: #8A6A1F; color: #FFFFFF; }
  #orticoin-app .chart-card {
    background: #FFFFFF; border: 1px solid #E7DFC9; border-radius: 16px; padding: 18px 10px 8px;
    overflow: visible; transition: padding-top .25s ease; position: relative;
  }
  #orticoin-app .chart-card.with-projection { padding-top: 58px; }
  #orticoin-app #oc-chart { overflow: visible; }
  #orticoin-app .proj-caption {
    font-size: 12.5px; color: #8A6A1F; margin: -4px 0 16px; font-style: italic;
  }
  #orticoin-app .tooltip {
    position: absolute; pointer-events: none; background: #FFFFFF; border: 1px solid #D8CFB8;
    border-radius: 10px; padding: 8px 12px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(31,42,31,0.14);
    transform: translate(-50%, -110%); white-space: normal; max-width: 190px; width: max-content;
    opacity: 0; transition: opacity .1s;
  }
  #orticoin-app .tooltip .d { color: #8A7F63; font-size: 11px; white-space: nowrap; }
  #orticoin-app .tooltip .p { color: #2F6B3C; font-weight: 700; font-size: 14px; font-family: ui-monospace, monospace; white-space: nowrap; }
  #orticoin-app .tooltip .h { color: #B23A2E; font-style: italic; margin-top: 3px; }
#orticoin-app .chart-hint { margin:8px 2px 0; color:#8A7F63; font:11px ui-monospace,monospace; letter-spacing:.25px; text-align:right; }
#orticoin-app .drag-node { cursor:grab; touch-action:none; }
#orticoin-app .drag-node:active { cursor:grabbing; }
  #orticoin-app svg text { font-family: ui-monospace, monospace; fill: #8A7F63; font-size: 11px; }
  #orticoin-app .ticker-wrap { margin-top: 18px; }
  #orticoin-app .ticker-label {
    display: flex; align-items: center; gap: 7px; font-family: ui-monospace, monospace;
    font-size: 11px; color: #8A7F63; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px;
  }
  #orticoin-app .ticker-label .dot {
    width: 7px; height: 7px; border-radius: 50%; background: #2F6B3C;
    animation: oc-pulse 1.6s ease-in-out infinite;
  }
  #orticoin-app .ticker-item {
    padding: 9px 2px; border-bottom: 1px solid #F1EBD9; font-size: 14px; color: #3A3524;
  }
  #orticoin-app .ticker-item.new { animation: oc-fadein .5s ease; }
  #orticoin-app .ticker-item:last-child { border-bottom: none; }
  #orticoin-app .ticker-item b { color: #2F6B3C; }
  #orticoin-app .ticker-delta { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; }
  #orticoin-app .ticker-delta.up { color: #2F6B3C; }
  #orticoin-app .ticker-delta.down { color: #B23A2E; }
  @keyframes oc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  @keyframes oc-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   MOBILE — ORTICOIN debe ser completamente legible en pantallas pequeñas.
   ========================================================================== */
@media (max-width: 700px) {
  #orticoin-app {
    width: 100%;
    max-width: 100%;
    padding: 20px 14px 32px;
    overflow: hidden;
  }

  #orticoin-app .header {
    display: block;
    margin-bottom: 22px;
  }

  #orticoin-app .brand {
    margin-bottom: 20px;
  }

  #orticoin-app h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  #orticoin-app .subtitle {
    font-size: 11px;
    line-height: 1.45;
  }

  #orticoin-app .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    width: 100%;
  }

  #orticoin-app .stat-label {
    font-size: 9px;
    line-height: 1.3;
  }

  #orticoin-app .stat-value {
    font-size: 13px;
    line-height: 1.35;
  }

  #orticoin-app .price-row {
    gap: 10px;
    margin-bottom: 14px !important;
  }

  #orticoin-app .price {
    font-size: 36px;
    line-height: 1.05;
  }

  #orticoin-app .change {
    font-size: 12px;
    padding: 4px 8px;
  }

  #orticoin-app .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  #orticoin-app .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 44px;
    padding: 7px 11px;
    font-size: 12px;
  }

  #orticoin-app .tab.proj {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  #orticoin-app .tab-spacer {
    display: none;
  }

  #orticoin-app .chart-card {
    padding: 12px 6px 6px;
    border-radius: 12px;
    overflow: hidden;
  }

  #orticoin-app .chart-card.with-projection {
    padding-top: 38px;
  }

  #orticoin-app #oc-chart {
    width: 100%;
    height: 220px !important;
  }

  #orticoin-app #oc-volchart {
    width: 100%;
    height: 48px !important;
  }

  #orticoin-app .proj-caption {
    font-size: 11px;
    line-height: 1.35;
    margin: -2px 0 10px;
  }

  #orticoin-app .ticker-wrap {
    margin-top: 14px;
  }

  #orticoin-app .ticker-item {
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 0;
  }

  #orticoin-app .ticker-delta {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  #orticoin-app {
    padding-left: 12px;
    padding-right: 12px;
  }

  #orticoin-app .price {
    font-size: 32px;
  }

  #orticoin-app .tab {
    min-width: 40px;
    padding-left: 9px;
    padding-right: 9px;
  }
}


/* v1.2 — market micro-data + barter interaction */
#orticoin-app .market-strip {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  margin: 0 0 18px; padding: 10px 12px;
  border-top:1px solid #F1EBD9; border-bottom:1px solid #F1EBD9;
}
#orticoin-app .market-strip > div { display:flex; align-items:baseline; gap:7px; min-width:0; }
#orticoin-app .market-k { color:#8A7F63; font-size:9px; text-transform:uppercase; letter-spacing:.6px; }
#orticoin-app .market-strip strong { color:#2F6B3C; font-size:13px; }
#orticoin-app .market-unit { color:#8A7F63; font-size:10px; }
#orticoin-app .barter-card { display:none; }
@media (max-width:700px) {
  #orticoin-app .market-strip { grid-template-columns:1fr; gap:7px; margin-bottom:14px; }
  #orticoin-app .market-strip > div { justify-content:space-between; }
  #orticoin-app .barter-card { align-items:flex-start; }
  #orticoin-app .barter-title { font-size:15px; line-height:1.25; }
  #orticoin-app .barter-next { align-self:center; }
}

#orticoin-app .oc-moon { filter: drop-shadow(0 4px 8px rgba(47,107,60,.14)); }


/* v1.5 — interacción de nodos */
#orticoin-app .drag-node { cursor: grab; touch-action: none; transition: r .12s ease, filter .12s ease; }
#orticoin-app .drag-node:hover, #orticoin-app .drag-node:focus { filter: drop-shadow(0 0 5px rgba(47,107,60,.45)); outline: none; }
#orticoin-app .drag-node.is-dragging { cursor: grabbing; filter: drop-shadow(0 0 9px rgba(47,107,60,.75)); }
#orticoin-app .oc-drag-toast { position:absolute; left:50%; bottom:12px; transform:translate(-50%,10px); opacity:0; pointer-events:none; padding:8px 12px; border:1px solid #E7DFC9; background:#fffdf7; color:#24352a; font:600 11px/1.2 Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; transition:opacity .18s ease, transform .18s ease; z-index:5; white-space:nowrap; }
#orticoin-app .oc-drag-toast.show { opacity:1; transform:translate(-50%,0); }
#orticoin-app .chart-card { overflow:visible; }
@media (max-width:700px){ #orticoin-app .oc-drag-toast{max-width:calc(100% - 24px); white-space:normal; text-align:center;} }


/* v1.9 — gráfico protagonista, pero contenido y proporcionado */
#orticoin-app {
  max-width: 1120px;
  padding: 30px 24px 44px;
}
#orticoin-app .chart-card {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 12px 8px;
  border: 1px solid #E7DFC9;
  border-radius: 14px;
}
#orticoin-app #oc-chart { height: 370px !important; }
#orticoin-app .ticker-wrap { max-width: 1120px; margin-left:auto; margin-right:auto; }
#orticoin-app .barter-card { max-width: 1120px; margin-left:auto; margin-right:auto; }

@media (max-width: 700px) {
  #orticoin-app {
    max-width: 100%;
    padding: 20px 14px 32px;
  }
  #orticoin-app .chart-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 10px 6px 6px;
    border-radius: 12px;
  }
  #orticoin-app #oc-chart { height: 240px !important; }
  #orticoin-app .market-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #orticoin-app .barter-card { flex-direction: column; align-items: stretch; }
  #orticoin-app .barter-next { width: 100%; }
}


/* v2.0 — line/candlestick modes + market message stack */
#orticoin-app .chart-mode { margin-left: 8px; }
#orticoin-app .candle-node { cursor: grab; touch-action: none; }
#orticoin-app .candle-node.is-dragging { cursor: grabbing; }
#orticoin-app .candle-readout { color:#8A7F63; font:10px ui-monospace,monospace; margin-top:3px; white-space:nowrap; }
#orticoin-app .oc-message-stack { position:absolute; right:16px; top:14px; width:min(390px, calc(100% - 32px)); display:flex; flex-direction:column; gap:7px; z-index:8; pointer-events:none; }
#orticoin-app .oc-market-message { background:rgba(255,253,247,.96); border:1px solid #E7DFC9; border-left:3px solid #2F6B3C; border-radius:8px; padding:9px 11px; box-shadow:0 5px 16px rgba(31,42,31,.08); color:#3A3524; font:600 11px/1.35 ui-monospace,monospace; animation:oc-msg-in .25s ease both; }
#orticoin-app .oc-market-message.fade { opacity:0; transform:translateX(12px); transition:opacity .45s ease, transform .45s ease; }
@keyframes oc-msg-in { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }
@media (max-width:700px){
 #orticoin-app .chart-mode { margin-left:0; }
 #orticoin-app .oc-message-stack { top:10px; right:10px; width:calc(100% - 20px); }
 #orticoin-app .oc-market-message { font-size:10px; }
 #orticoin-app .candle-readout { font-size:9px; }
}


/* v2.2 — composición definitiva: misma escala que la versión de referencia */
#orticoin-app {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 0 42px;
}
#orticoin-app .header { margin-bottom: 28px; }
#orticoin-app .stats { gap: 28px; }
#orticoin-app .price-row { margin-bottom: 20px !important; }
#orticoin-app .market-strip { margin-bottom: 18px; }
#orticoin-app .tabs { margin-bottom: 16px; }
#orticoin-app .chart-card {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 10px 8px;
  border-radius: 14px;
  overflow: hidden;
}
#orticoin-app #oc-chart { width: 100%; height: 400px !important; display:block; }
#orticoin-app .ticker-wrap { max-width:1180px; margin:18px auto 0; }

/* La pila es un único bloque, fuera y encima del gráfico. */
#orticoin-app .oc-message-stack {
  position: static;
  width: 100%;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  max-height: 132px;
  overflow: hidden;
}
#orticoin-app .oc-market-message {
  border: 0;
  border-bottom: 1px solid #F1EBD9;
  border-left: 0;
  border-radius: 0;
  padding: 7px 2px;
  box-shadow: none;
  background: transparent;
  color: #3A3524;
  font: 600 12px/1.4 ui-monospace,monospace;
  animation: oc-msg-in .22s ease both;
}
#orticoin-app .oc-market-message::before { content: '• '; color:#2F6B3C; }
#orticoin-app .oc-market-message.fade { opacity:0; transform:none; }

/* Área táctil generosa para móviles sin deformar demasiado el gráfico. */
#orticoin-app .drag-node { touch-action:none; -webkit-user-select:none; user-select:none; }
#orticoin-app .candle-node { touch-action:none; }

@media (max-width: 700px) {
  #orticoin-app { max-width:100%; padding:20px 14px 32px; }
  #orticoin-app .header { margin-bottom:22px; }
  #orticoin-app .stats { gap:14px 18px; }
  #orticoin-app .chart-card { padding:10px 6px 6px; border-radius:12px; }
  #orticoin-app #oc-chart { height:240px !important; }
  #orticoin-app .oc-message-stack { margin-bottom:8px; max-height:116px; }
  #orticoin-app .oc-market-message { font-size:10.5px; padding:6px 0; line-height:1.35; }
  #orticoin-app .ticker-wrap { margin-top:14px; }
}

/* v2.3 — mensajes únicos, proyección contenida y estado por emoji */
#orticoin-app .oc-message-stack {
  position: relative;
  width: 100%;
  min-height: 38px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #E7DFC9;
  border-left: 3px solid #2F6B3C;
  border-radius: 9px;
  background: #FFFDF7;
  color: #3A3524;
  font: 600 11.5px/1.35 ui-monospace, monospace;
  pointer-events: none;
  overflow: hidden;
}
#orticoin-app .oc-message-stack::before { content: '•'; color:#2F6B3C; margin-right:7px; }
#orticoin-app .oc-message-stack.is-changing { animation: oc-message-swap .28s ease; }
@keyframes oc-message-swap { from{opacity:.25; transform:translateY(-3px)} to{opacity:1; transform:translateY(0)} }
#orticoin-app .oc-confidence-emoji { font-size: 22px; line-height: 1; display:inline-block; }
#orticoin-app .chart-card.with-projection { padding-bottom: 14px; }
#orticoin-app #oc-projection-chart { display:block; width:100%; margin-top:10px; border-top:1px solid #F1EBD9; padding-top:6px; }
#orticoin-app .proj-caption { margin: 0 0 8px; font-size:11px; letter-spacing:.35px; text-transform:uppercase; font-style:normal; }
@media (max-width:700px) {
  #orticoin-app .oc-message-stack { min-height:36px; margin-bottom:8px; padding:8px 9px; font-size:10px; }
  #orticoin-app .oc-confidence-emoji { font-size:20px; }
  #orticoin-app #oc-projection-chart { height:210px !important; margin-top:8px; }
  #orticoin-app .proj-caption { font-size:9.5px; line-height:1.3; }
}


/* v2.4 — limpieza visual y proyección integrada en el gráfico principal */
#orticoin-app .chart-card {
  overflow-x: hidden;
  overflow-y: visible;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#orticoin-app .chart-card.projection-active {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #D8CFB8 transparent;
}
#orticoin-app .chart-card.projection-active #oc-chart {
  max-width: none !important;
}
#orticoin-app .oc-message-stack {
  display: none;
  min-height: 0;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #E7DFC9;
  border-left: 3px solid #2F6B3C;
  border-radius: 9px;
  background: #FFFDF7;
  color: #3A3524;
  font: 600 11.5px/1.35 ui-monospace, monospace;
}
#orticoin-app .oc-message-stack.is-visible { display: block; }
#orticoin-app .oc-message-stack::before { content: '•'; color:#2F6B3C; margin-right:7px; }
#orticoin-app .oc-message-stack.is-changing { animation: oc-message-swap .28s ease; }
@keyframes oc-message-swap { from { opacity:.2; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
#orticoin-app .market-k[title] { cursor: help; border-bottom: 1px dotted #B9AD8F; }
#orticoin-app .oc-confidence-emoji { font-size: 22px; line-height: 1; }
#orticoin-app .proj-caption {
  color:#8A6A1F; font:600 10.5px/1.4 ui-monospace,monospace;
  text-transform:uppercase; letter-spacing:.35px; margin:0 0 9px;
}
@media (max-width:700px) {
  #orticoin-app .oc-message-stack { font-size:10px; padding:8px 9px; margin-bottom:8px; }
  #orticoin-app .proj-caption { font-size:9px; }
  #orticoin-app .chart-card.projection-active { -webkit-overflow-scrolling:touch; }
}

/* v2.4 — ajuste final de proporciones */
#orticoin-app {
  max-width: 1180px;
  padding: 30px 0 42px;
}
#orticoin-app .header {
  align-items: flex-end;
  margin-bottom: 30px;
}
#orticoin-app .brand h1 { letter-spacing: 1.2px; }
#orticoin-app .stats { align-items: flex-end; gap: 30px; }
#orticoin-app .stat-label { margin-bottom: 4px; }
#orticoin-app .price-row { margin-bottom: 22px !important; }
#orticoin-app .price { font-size: 44px; letter-spacing: -.8px; }
#orticoin-app .market-strip {
  margin: 0 0 22px;
  padding: 11px 0;
  border-top: 1px solid #EEE7D6;
  border-bottom: 1px solid #EEE7D6;
  gap: 0;
}
#orticoin-app .market-strip > div {
  padding: 0 18px;
  border-right: 1px solid #F1EBD9;
}
#orticoin-app .market-strip > div:first-child { padding-left: 0; }
#orticoin-app .market-strip > div:last-child { border-right: 0; }
#orticoin-app .tabs { margin-bottom: 14px; align-items: center; }
#orticoin-app .tab { border-radius: 7px; }
#orticoin-app .tab.proj { margin-left: 8px; }
#orticoin-app .chart-card {
  border-radius: 13px;
  padding: 12px 8px 8px;
  box-shadow: 0 1px 0 rgba(31,42,31,.02);
}
#orticoin-app #oc-chart { height: 360px !important; }
#orticoin-app .ticker-wrap { margin-top: 16px; }

@media (max-width:700px) {
  #orticoin-app { padding: 20px 14px 32px; }
  #orticoin-app .header { margin-bottom: 22px; }
  #orticoin-app .stats { gap: 14px 18px; }
  #orticoin-app .price { font-size: 36px; }
  #orticoin-app .market-strip { gap: 0; }
  #orticoin-app .market-strip > div {
    padding: 7px 8px;
    border-right: 0;
    border-bottom: 1px solid #F1EBD9;
  }
  #orticoin-app .market-strip > div:first-child { padding-left: 0; }
  #orticoin-app .market-strip > div:last-child { border-bottom: 0; }
  #orticoin-app .tab.proj { margin-left: 0; }
  #orticoin-app #oc-chart { height: 240px !important; }
}


/* v2.5 — proyección "to the moon" minimalista */
#orticoin-app .chart-card.projection-active {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
#orticoin-app .chart-card.projection-active #oc-chart {
  max-width: none !important;
}
#orticoin-app .proj-caption {
  margin: 0 0 10px;
  color: #8A6A1F;
  font-size: 11px;
  letter-spacing: .25px;
  font-style: italic;
}
@media (max-width:700px) {
  #orticoin-app .chart-card.projection-active {
    -webkit-overflow-scrolling: touch;
  }
  #orticoin-app .proj-caption {
    font-size: 10px;
    line-height: 1.35;
  }
}

/* v2.6 — la proyección no redimensiona el gráfico: rompe visualmente el bloque */
#orticoin-app .chart-card.projection-active { overflow: visible !important; }
#orticoin-app .chart-card.projection-active #oc-chart { overflow: visible !important; }
#orticoin-app.projection-active, #orticoin-app:has(.chart-card.projection-active) { overflow: visible !important; }
#orticoin-app .proj-caption { display:none !important; }