/* ============================================================
   CISMANGT MONITOR
   Archivo: monitor/css/monitor.css

   Objetivo:
   Dar estilo completo al dashboard privado del Monitor.

   Paleta:
   - Fondo azul muy oscuro
   - Azul eléctrico
   - Cian
   - Verde para datos positivos
   - Morado como acento secundario
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES

   Usamos variables CSS para no repetir colores y medidas.
   Si después queremos cambiar toda la identidad visual,
   podremos hacerlo desde aquí.
   ============================================================ */

:root {
  --bg: #06101d;
  --bg-deep: #030914;
  --bg-soft: #08182d;

  --panel: rgba(9, 28, 51, 0.86);
  --panel-strong: rgba(8, 25, 47, 0.96);
  --panel-light: rgba(14, 38, 67, 0.74);

  --line: rgba(78, 137, 226, 0.18);
  --line-strong: rgba(78, 146, 255, 0.34);

  --text: #f5f8ff;
  --muted: #91a7c7;
  --muted-2: #6f85a7;

  --blue: #2587ff;
  --blue-2: #4f5cff;
  --cyan: #37c8ff;
  --green: #27e1ad;
  --purple: #8457ff;
  --yellow: #f5c84c;
  --red: #ff5c7f;

  --sidebar-width: 250px;

  --radius-small: 12px;
  --radius: 18px;
  --radius-large: 24px;

  --shadow:
    0 20px 60px rgba(0, 0, 0, 0.34);

  --transition:
    0.18s ease;
}


/* ============================================================
   2. RESET BÁSICO
   ============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 74% 15%,
      rgba(49, 91, 255, 0.16),
      transparent 24%
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(41, 174, 255, 0.08),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #06101d 0%,
      #071526 50%,
      #050e19 100%
    );

  overflow-x: hidden;
}


/*
  Añade una capa visual muy sutil sobre todo el fondo.
*/
body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.5) 0 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 80% 65%,
      rgba(255, 255, 255, 0.3) 0 1px,
      transparent 1.4px
    );

  background-size:
    300px 260px,
    420px 380px;

  opacity: 0.1;

  z-index: -1;
}


button,
input {
  font: inherit;
}


button {
  color: inherit;
}


a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   3. ESTRUCTURA PRINCIPAL
   ============================================================ */

.app-shell {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);
}


.main-area {
  /*
    La sidebar está fija y por eso no participa
    normalmente en el Grid.

    Le indicamos explícitamente que esta zona
    pertenece a la segunda columna.
  */
  grid-column: 2;

  min-width: 0;
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */

.sidebar {
  position: fixed;

  left: 0;
  top: 0;
  bottom: 0;

  width: var(--sidebar-width);

  display: flex;
  flex-direction: column;

  padding: 24px 16px;

  background:
    linear-gradient(
      180deg,
      rgba(5, 17, 32, 0.98),
      rgba(5, 18, 35, 0.97)
    );

  border-right:
    1px solid var(--line);

  box-shadow:
    18px 0 55px rgba(0, 0, 0, 0.18);

  z-index: 100;
}


/* ============================================================
   5. LOGO
   ============================================================ */

.brand {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 4px 8px 28px;
}


.brand-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: flex-end;

  gap: 3px;

  padding: 6px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(38, 135, 255, 0.18),
      rgba(55, 200, 255, 0.08)
    );

  border:
    1px solid rgba(71, 151, 255, 0.26);

  box-shadow:
    0 0 26px rgba(37, 135, 255, 0.12);
}


.brand-icon span {
  flex: 1;

  border-radius: 3px;

  background:
    linear-gradient(
      180deg,
      var(--cyan),
      var(--blue-2)
    );
}


.brand-icon span:nth-child(1) {
  height: 34%;
}


.brand-icon span:nth-child(2) {
  height: 58%;
}


.brand-icon span:nth-child(3) {
  height: 80%;
}


.brand-icon span:nth-child(4) {
  height: 100%;
}


.brand-text {
  display: flex;
  flex-direction: column;
}


.brand-text strong {
  font-size: 1.25rem;
  letter-spacing: -0.035em;
}


.brand-text strong span {
  color: #5a6cff;
}


.brand-text small {
  color: var(--cyan);
  margin-top: 2px;
  font-size: 0.82rem;
}


/* ============================================================
   6. NAVEGACIÓN
   ============================================================ */

.sidebar-nav {
  display: grid;
  gap: 8px;
}


.nav-item {
  width: 100%;

  border: 1px solid transparent;

  border-radius: 13px;

  padding: 12px 14px;

  display: flex;
  align-items: center;

  gap: 12px;

  background: transparent;

  color: #aebed5;

  cursor: pointer;

  text-align: left;

  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}


.nav-item:hover {
  color: #ffffff;

  background:
    rgba(27, 70, 119, 0.18);

  border-color:
    rgba(78, 146, 255, 0.14);
}


.nav-item.active {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      rgba(37, 135, 255, 0.28),
      rgba(79, 92, 255, 0.22)
    );

  border-color:
    rgba(49, 139, 255, 0.72);

  box-shadow:
    inset 0 0 30px rgba(37, 135, 255, 0.08),
    0 10px 28px rgba(37, 135, 255, 0.14);
}


.nav-icon {
  width: 25px;

  display: inline-flex;
  justify-content: center;

  font-size: 1.05rem;

  color: #81bfff;
}


.sidebar-footer {
  margin-top: auto;

  display: grid;

  gap: 20px;
}


.sidebar-message {
  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    16px
    12px
    6px;

  color: #8196b7;

  font-size: 0.82rem;

  line-height: 1.45;
}


.status-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 15px rgba(39, 225, 173, 0.8);
}


/* ============================================================
   7. TOPBAR
   ============================================================ */

.topbar {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    14px
    28px;

  position: sticky;

  top: 0;

  z-index: 80;

  backdrop-filter: blur(18px);

  background:
    rgba(5, 15, 28, 0.78);

  border-bottom:
    1px solid rgba(78, 137, 226, 0.12);
}


/* ============================================================
   8. BUSCADOR
   ============================================================ */

.search-box {
  width:
    min(
      600px,
      48vw
    );

  min-width: 260px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    0
    14px;

  border:
    1px solid rgba(80, 136, 216, 0.2);

  border-radius: 13px;

  background:
    rgba(7, 23, 43, 0.72);

  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}


.search-box:focus-within {
  border-color:
    rgba(62, 149, 255, 0.65);

  box-shadow:
    0 0 0 3px rgba(37, 135, 255, 0.08);
}


.search-icon {
  color: #81a5d3;

  font-size: 1.2rem;
}


.search-box input {
  width: 100%;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--text);

  padding:
    12px
    0;
}


.search-box input::placeholder {
  color: #647b9d;
}


/* ============================================================
   9. ÁREA DEL USUARIO
   ============================================================ */

.user-area {
  display: flex;
  align-items: center;

  gap: 12px;
}


.icon-button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(78, 137, 226, 0.22);

  border-radius: 12px;

  background:
    rgba(9, 28, 51, 0.72);

  cursor: pointer;

  color: #bed3f2;

  transition:
    border-color var(--transition),
    background var(--transition);
}


.icon-button:hover {
  background:
    rgba(21, 59, 100, 0.62);

  border-color:
    rgba(78, 146, 255, 0.52);
}


.user-info {
  display: flex;
  align-items: center;

  gap: 10px;
}


.user-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-weight: 800;

  background:
    linear-gradient(
      135deg,
      #198dff,
      #6a45ff
    );

  box-shadow:
    0 0 25px rgba(75, 86, 255, 0.24);
}


.user-name {
  display: flex;
  flex-direction: column;

  line-height: 1.25;
}


.user-name strong {
  font-size: 0.9rem;
}


.user-name small {
  color: var(--muted);

  font-size: 0.75rem;
}


.logout-button {
  border:
    1px solid rgba(255, 92, 127, 0.3);

  border-radius: 12px;

  padding:
    10px
    14px;

  background:
    rgba(255, 92, 127, 0.08);

  color: #ffc0cf;

  font-weight: 700;

  cursor: pointer;

  transition:
    background var(--transition),
    border-color var(--transition);
}


.logout-button:hover {
  background:
    rgba(255, 92, 127, 0.16);

  border-color:
    rgba(255, 92, 127, 0.54);
}


/* ============================================================
   10. CONTENIDO GENERAL
   ============================================================ */

.content {
  /*
    Ya no necesitamos empujar el contenido hacia
    la derecha porque .main-area ocupa directamente
    la segunda columna del Grid.
  */
  margin-left: 0;

  padding:
    34px
    30px
    40px;
}


/* ============================================================
   11. ENCABEZADO
   ============================================================ */

.page-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;
}


.eyebrow {
  margin:
    0
    0
    8px;

  color: #62b5ff;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.2em;
}


.page-heading h1 {
  margin: 0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.15rem
    );

  letter-spacing: -0.055em;

  line-height: 1;
}


.page-description {
  max-width: 760px;

  margin:
    12px
    0
    0;

  color: var(--muted);

  line-height: 1.6;
}


.data-status {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding:
    10px
    14px;

  border:
    1px solid rgba(39, 225, 173, 0.2);

  border-radius: 999px;

  color: #9ed7c7;

  background:
    rgba(39, 225, 173, 0.05);

  font-size: 0.82rem;

  white-space: nowrap;
}


/* ============================================================
   12. TARJETAS DE RESUMEN
   ============================================================ */

.summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin-bottom: 18px;
}


.summary-card {
  min-height: 154px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  padding: 19px;

  border:
    1px solid var(--line);

  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(13, 38, 67, 0.82),
      rgba(7, 23, 42, 0.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}


.summary-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(77, 146, 255, 0.38);

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.22);
}


.summary-card-header {
  display: flex;
  align-items: center;

  gap: 11px;

  color: #c9d5e6;

  font-weight: 700;
}


.asset-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: white;

  font-size: 1.12rem;

  font-weight: 900;
}


.asset-icon.btc {
  background:
    linear-gradient(
      145deg,
      #ff9a20,
      #f27b11
    );
}


.asset-icon.usdt {
  background:
    linear-gradient(
      145deg,
      #2dcf9a,
      #119f7b
    );
}


.asset-icon.bcv {
  background:
    linear-gradient(
      145deg,
      #318fff,
      #355cff
    );
}


.asset-icon.market-cap {
  background:
    linear-gradient(
      145deg,
      #8c58ff,
      #5a40df
    );
}


.summary-value {
  font-size:
    clamp(
      1.5rem,
      2.6vw,
      2rem
    );

  letter-spacing: -0.04em;
}


.summary-change {
  color: var(--muted);

  font-size: 0.82rem;
}

/* ============================================================
   ESTADOS DE VARIACIÓN DEL MERCADO
   ============================================================ */

.summary-change.change-positive {
  color: var(--green);
}


.summary-change.change-negative {
  color: #ff6b7a;
}


.summary-change.change-neutral {
  color: var(--muted);
}


.summary-detail {
  color: var(--muted-2);

  font-size: 0.72rem;
  line-height: 1.35;
}


/* ============================================================
   ESTADO DE CARGA DEL MERCADO
   ============================================================ */

.data-status.status-loading {
  color: #d9bd72;

  border-color:
    rgba(234, 190, 88, 0.25);
}


.data-status.status-ready {
  color: #9ed7c7;

  border-color:
    rgba(39, 225, 173, 0.2);
}


.data-status.status-error {
  color: #ff9aa6;

  border-color:
    rgba(255, 107, 122, 0.28);
}


.status-dot.status-loading {
  background: #eabd58;

  box-shadow:
    0 0 15px rgba(234, 189, 88, 0.65);
}


.status-dot.status-ready {
  background: var(--green);

  box-shadow:
    0 0 15px rgba(39, 225, 173, 0.8);
}


.status-dot.status-error {
  background: #ff6b7a;

  box-shadow:
    0 0 15px rgba(255, 107, 122, 0.7);
}

/* ============================================================
   13. PANEL GENERAL
   ============================================================ */

.panel {
  border:
    1px solid var(--line);

  border-radius: var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(9, 29, 52, 0.9),
      rgba(7, 23, 42, 0.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018);
}


.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    20px
    22px
    16px;
}


.panel-header h2 {
  margin:
    3px
    0
    4px;

  font-size: 1.15rem;

  letter-spacing: -0.025em;
}


.panel-header p {
  margin: 0;

  color: var(--muted);

  font-size: 0.83rem;
}


.panel-kicker {
  color: #61aeff;

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.16em;
}


/* ============================================================
   14. DASHBOARD GRID
   ============================================================ */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(300px, 0.9fr);

  gap: 18px;

  margin-bottom: 18px;
}


/* ============================================================
   15. SELECTOR DE RANGO
   ============================================================ */

.range-selector {
  display: flex;

  padding: 4px;

  gap: 4px;

  border:
    1px solid rgba(76, 137, 222, 0.18);

  border-radius: 10px;

  background:
    rgba(4, 17, 32, 0.5);
}


.range-button {
  border: 0;

  border-radius: 8px;

  padding:
    8px
    11px;

  background: transparent;

  color: #93a8c7;

  cursor: pointer;

  font-size: 0.78rem;

  transition:
    background var(--transition),
    color var(--transition);
}


.range-button:hover {
  color: #ffffff;
}


.range-button.active {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #198dff,
      #355cff
    );

  box-shadow:
    0 7px 20px rgba(37, 135, 255, 0.26);
}


/* ============================================================
   16. GRÁFICO PROVISIONAL
   ============================================================ */

.chart-placeholder {
  min-height: 360px;

  margin:
    0
    18px
    18px;

  position: relative;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid rgba(79, 137, 221, 0.14);

  border-radius: 14px;

  background:
    linear-gradient(
      rgba(79, 125, 185, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79, 125, 185, 0.055) 1px,
      transparent 1px
    ),
    rgba(4, 16, 30, 0.58);

  background-size:
    100% 20%,
    12.5% 100%;
}


/*
  Simula una línea ascendente de gráfico
  antes de conectar datos reales.
*/
.chart-placeholder::before {
  content: "";

  position: absolute;

  left: 6%;
  right: 6%;

  bottom: 25%;

  height: 3px;

  opacity: 0.55;

  background:
    linear-gradient(
      90deg,
      transparent,
      #2f83ff 8%,
      #37c8ff 25%,
      #4e7fff 42%,
      #37c8ff 63%,
      #8457ff 82%,
      transparent
    );

  transform:
    skewY(-7deg);

  box-shadow:
    0 0 18px rgba(55, 144, 255, 0.34);
}


.chart-placeholder-content {
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 8px;

  padding: 24px;

  text-align: center;

  background:
    rgba(4, 16, 30, 0.68);

  border:
    1px solid rgba(78, 146, 255, 0.12);

  border-radius: 16px;
}


.chart-placeholder-content strong {
  font-size: 1rem;
}


.chart-placeholder-content span:last-child {
  color: var(--muted);

  font-size: 0.82rem;
}


.chart-placeholder-icon {
  font-size: 2rem;

  color: #54a3ff;
}


/* ============================================================
   17. LISTA DE ACTIVOS
   ============================================================ */

.watchlist-panel {
  min-width: 0;
}


.asset-list {
  display: grid;

  padding:
    0
    16px
    16px;
}


.asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 61px;

  padding:
    10px
    8px;

  border-bottom:
    1px solid rgba(88, 133, 203, 0.1);

  color: #d8e3f2;
}


.asset-row:last-child {
  border-bottom: 0;
}


.asset-name {
  display: flex;
  align-items: center;

  gap: 11px;
}


.asset-name div {
  display: flex;
  flex-direction: column;
}


.asset-name strong {
  font-size: 0.9rem;
}


.asset-name small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 0.7rem;
}


.coin {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-weight: 900;
}


.coin.btc {
  color: white;

  background:
    linear-gradient(
      145deg,
      #ff9a20,
      #f27b11
    );
}


.coin.eth {
  background:
    linear-gradient(
      145deg,
      #7b8bbd,
      #505c85
    );
}


.coin.bnb {
  background:
    linear-gradient(
      145deg,
      #ffc62c,
      #e69c00
    );

  color: #141414;
}


.coin.xrp {
  background:
    #202938;

  color: white;
}


.coin.trx {
  background:
    linear-gradient(
      145deg,
      #ff3c5e,
      #c81331
    );
}


.coin.sol {
  background:
    linear-gradient(
      145deg,
      #28e0b9,
      #8457ff
    );
}


/* ============================================================
   18. PANEL P2P
   ============================================================ */

.p2p-panel {
  margin-bottom: 18px;
}


.exchange-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;

  padding:
    0
    18px
    18px;
}


.exchange-card {
  min-height: 170px;

  display: grid;

  gap: 8px;

  padding: 17px;

  border:
    1px solid rgba(77, 137, 218, 0.16);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 38, 67, 0.68),
      rgba(6, 22, 41, 0.84)
    );
}


.exchange-card strong {
  margin-bottom: 4px;

  font-size: 1rem;
}


.exchange-card span {
  color: var(--muted);

  font-size: 0.75rem;
}


.exchange-card b {
  font-size: 1.04rem;
}


/* ============================================================
   19. PARTE INFERIOR
   ============================================================ */

.bottom-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}


/* ============================================================
   20. ESTADO VACÍO
   ============================================================ */

.empty-state {
  min-height: 220px;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 8px;

  padding: 30px;

  text-align: center;

  color: var(--muted);
}


.empty-state > span {
  font-size: 2rem;

  color: #4ca0ff;
}


.empty-state strong {
  color: var(--text);
}


.empty-state p {
  max-width: 430px;

  margin: 0;

  line-height: 1.55;

  font-size: 0.84rem;
}


/* ============================================================
   21. COMPARACIÓN P2P / BCV
   ============================================================ */

.comparison {
  display: grid;

  gap: 12px;

  padding:
    0
    20px
    20px;
}


.comparison > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    15px
    16px;

  border:
    1px solid rgba(83, 139, 220, 0.14);

  border-radius: 13px;

  background:
    rgba(6, 21, 39, 0.48);
}


.comparison span {
  color: var(--muted);

  font-size: 0.82rem;
}


.comparison strong {
  font-size: 1rem;
}


.comparison-result {
  border-color:
    rgba(39, 225, 173, 0.22)
    !important;

  background:
    rgba(39, 225, 173, 0.045)
    !important;
}


.comparison-result strong {
  color: var(--green);
}


/* ============================================================
   22. FOOTER
   ============================================================ */

.app-footer {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin-top: 28px;

  padding:
    20px
    4px
    8px;

  color: #687d9c;

  font-size: 0.78rem;

  border-top:
    1px solid rgba(82, 130, 200, 0.08);
}


/* ============================================================
   23. RESPONSIVE
   ============================================================ */


/*
  Portátiles y tablets horizontales.
*/
@media (max-width: 1180px) {

  :root {
    --sidebar-width: 220px;
  }


  .summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .exchange-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .dashboard-grid {
    grid-template-columns: 1fr;
  }

}


/*
  Tablets.
*/
@media (max-width: 900px) {

  :root {
    --sidebar-width: 84px;
  }


  .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }


  .brand {
    justify-content: center;

    padding-left: 0;
    padding-right: 0;
  }


  .brand-text {
    display: none;
  }


  .nav-item {
    justify-content: center;

    padding:
      12px
      8px;
  }


  .nav-item > span:last-child {
    display: none;
  }


  .nav-icon {
    width: auto;

    font-size: 1.18rem;
  }


  .sidebar-message {
    justify-content: center;

    padding-left: 0;
    padding-right: 0;
  }


  .sidebar-message span:last-child {
    display: none;
  }


  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }


  .user-name {
    display: none;
  }


  .content {
    padding-left: 20px;
    padding-right: 20px;
  }


  .bottom-grid {
    grid-template-columns: 1fr;
  }

}


/*
  Móvil.
*/
@media (max-width: 680px) {

  /*
    En móvil retiramos temporalmente la sidebar lateral.
    Más adelante construiremos una navegación inferior
    parecida a la aplicación Flutter.
  */

  .app-shell {
    display: block;
  }


  .sidebar {
    display: none;
  }


  .content {
    margin-left: 0;

    padding:
      20px
      14px
      30px;
  }


  .topbar {
    padding:
      12px
      14px;

    gap: 10px;
  }


  .search-box {
    min-width: 0;

    width: 100%;
  }


  .user-info {
    display: none;
  }


  .logout-button {
    padding:
      9px
      10px;

    font-size: 0.75rem;
  }


  .icon-button {
    display: none;
  }


  .page-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .data-status {
    white-space: normal;
  }


  .summary-grid {
    grid-template-columns: 1fr;
  }


  .dashboard-grid {
    grid-template-columns: 1fr;
  }


  .panel-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .range-selector {
    width: 100%;

    justify-content: space-between;
  }


  .range-button {
    flex: 1;
  }


  .chart-placeholder {
    min-height: 280px;
  }


  .exchange-grid {
    grid-template-columns: 1fr;
  }


  .bottom-grid {
    grid-template-columns: 1fr;
  }


  .app-footer {
    flex-direction: column;

    gap: 8px;
  }

}

/* ============================================================
   24. NAVEGACIÓN INTERNA + MÓDULO BCV

   Estas reglas agregan las vistas internas del Monitor sin
   convertir cada módulo en una página HTML independiente.
   ============================================================ */

.monitor-view[hidden] {
  display: none !important;
}


.summary-card-action {
  appearance: none;

  width: 100%;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;
}


.summary-card-action:focus-visible {
  outline:
    2px solid rgba(55, 200, 255, 0.88);

  outline-offset: 3px;
}


.bcv-page-heading {
  align-items: center;
}


.bcv-effective-date {
  margin:
    12px
    0
    0;

  color: #bad3ef;

  font-size: 0.88rem;
  font-weight: 700;
}


.bcv-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  flex-wrap: wrap;
}


.bcv-source-pill {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding:
    10px
    14px;

  border:
    1px solid rgba(39, 225, 173, 0.2);

  border-radius: 999px;

  color: #9ed7c7;

  background:
    rgba(39, 225, 173, 0.05);

  font-size: 0.82rem;

  white-space: nowrap;
}


.section-back-button {
  border:
    1px solid rgba(78, 146, 255, 0.28);

  border-radius: 11px;

  padding:
    10px
    13px;

  background:
    rgba(13, 38, 67, 0.7);

  color: #c7dbf8;

  cursor: pointer;

  font-weight: 750;

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


.section-back-button:hover {
  transform:
    translateY(-1px);

  background:
    rgba(24, 65, 109, 0.72);

  border-color:
    rgba(78, 146, 255, 0.58);
}


.bcv-rate-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin-bottom: 18px;
}


.bcv-rate-card {
  min-height: 174px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  gap: 14px;

  padding: 20px;

  border:
    1px solid var(--line);

  border-radius: var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(13, 38, 67, 0.82),
      rgba(7, 23, 42, 0.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


.bcv-index-card {
  border-color:
    rgba(109, 94, 252, 0.34);

  background:
    radial-gradient(
      circle at top right,
      rgba(88, 101, 242, 0.18),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(17, 37, 72, 0.9),
      rgba(10, 20, 46, 0.96)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(31, 38, 96, 0.12);
}


.bcv-index-card .bcv-index-code {
  border-color:
    rgba(139, 92, 246, 0.42);

  color: #eee9ff;

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.28),
      rgba(37, 135, 255, 0.2)
    );
}


.bcv-rate-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.bcv-currency-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;

  padding:
    7px
    9px;

  border:
    1px solid rgba(78, 146, 255, 0.28);

  border-radius: 10px;

  color: #dbeaff;

  background:
    linear-gradient(
      135deg,
      rgba(37, 135, 255, 0.2),
      rgba(79, 92, 255, 0.16)
    );

  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}


.bcv-currency-name {
  color: var(--muted);

  font-size: 0.78rem;

  text-align: right;
}


.bcv-rate-value {
  font-size:
    clamp(
      1.45rem,
      2.7vw,
      2.05rem
    );

  letter-spacing: -0.04em;
}


.bcv-rate-variation {
  color: var(--muted);

  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}


.bcv-rate-variation.change-positive {
  color: var(--green);
}


.bcv-rate-variation.change-negative {
  color: #ff6b7a;
}


.bcv-rate-variation.change-neutral {
  color: var(--muted);
}


.bcv-rate-caption {
  color: var(--muted-2);

  font-size: 0.76rem;
}


.bcv-chart-panel {
  overflow: hidden;

  margin-bottom: 18px;
}


.bcv-chart-header {
  align-items: flex-start;

  flex-wrap: wrap;
}


.bcv-chart-heading {
  min-width: 230px;
}


.bcv-chart-current {
  display: block;

  margin:
    9px
    0
    5px;

  color: #f4f8ff;

  font-size:
    clamp(
      1.5rem,
      2.8vw,
      2rem
    );

  letter-spacing: -0.04em;
}


.bcv-chart-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  flex-wrap: wrap;

  margin-left: auto;
}


.bcv-metric-selector,
.bcv-range-selector {
  display: flex;

  padding: 4px;

  gap: 4px;

  border:
    1px solid rgba(76, 137, 222, 0.18);

  border-radius: 10px;

  background:
    rgba(4, 17, 32, 0.5);
}


.bcv-metric-button,
.bcv-range-button {
  border: 0;

  border-radius: 8px;

  padding:
    8px
    11px;

  background: transparent;

  color: #93a8c7;

  cursor: pointer;

  font-size: 0.78rem;
  font-weight: 700;

  transition:
    background var(--transition),
    color var(--transition);
}


.bcv-metric-button:hover,
.bcv-range-button:hover {
  color: #ffffff;
}


.bcv-metric-button.active,
.bcv-range-button.active {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #198dff,
      #355cff
    );

  box-shadow:
    0 7px 20px rgba(37, 105, 255, 0.22);
}


.module-placeholder-panel {
  min-height: 360px;
}


@media (max-width: 980px) {

  .bcv-rate-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .bcv-chart-controls {
    width: 100%;

    justify-content: flex-start;

    margin-left: 0;
  }

}


@media (max-width: 680px) {

  .bcv-page-heading {
    align-items: flex-start;
  }


  .bcv-heading-actions {
    width: 100%;

    justify-content: flex-start;
  }


  .bcv-rate-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 10px;
  }


  .bcv-rate-card {
    min-height: 132px;

    padding: 15px;

    gap: 10px;
  }


  .bcv-rate-card-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .bcv-currency-name {
    text-align: left;
  }


  .bcv-rate-value {
    font-size: 1.28rem;
  }


  .bcv-chart-controls,
  .bcv-metric-selector,
  .bcv-range-selector {
    width: 100%;
  }


  .bcv-metric-button,
  .bcv-range-button {
    flex: 1;

    padding-left: 7px;
    padding-right: 7px;
  }

}


/* CISMANGT_P2P_LATEST_V1 — continúa la paleta y las tarjetas del Monitor. */
.p2p-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.p2p-button {
  border: 1px solid rgba(77, 137, 218, .28); border-radius: 10px;
  background: rgba(23, 57, 94, .5); color: var(--text);
  padding: 10px 14px; font: inherit; font-size: .8rem; cursor: pointer;
}
.p2p-button:hover { background: rgba(36, 88, 140, .5); }
.p2p-button:focus-visible, .p2p-row-details summary:focus-visible {
  outline: 2px solid #62b5ff; outline-offset: 4px;
}
.p2p-button:disabled { opacity: .6; cursor: wait; }
.p2p-heading { align-items: flex-start; }
.p2p-heading .page-description { max-width: 660px; }
.p2p-meta { padding: 0 20px 18px; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.p2p-status { color: #d9bd72; font-size: .78rem; }
.p2p-status::before { content: ""; display: inline-block; width: 6px; height: 6px;
  background: currentColor; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.p2p-status[data-state="ready"] { color: var(--green); }
.p2p-status[data-state="warning"] { color: #eabd58; }
.p2p-status[data-state="error"] { color: #ff9aa6; }
.p2p-date { color: var(--muted); font-size: .75rem; }
.p2p-sides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.p2p-overview .p2p-sides-grid { padding: 0 18px 18px; gap: 14px; }
.p2p-side-card {
  --p2p-accent: #62b5ff;
  min-width: 0; overflow: hidden; border: 1px solid rgba(77, 137, 218, .2);
  border-radius: 16px; background: linear-gradient(145deg, rgba(13, 38, 67, .7), rgba(6, 22, 41, .9));
}
.p2p-side-card[data-p2p-side="sell_usdt"] { --p2p-accent: #27e1ad; }
.p2p-side-heading { border-bottom: 1px solid rgba(77, 137, 218, .16); padding: 20px; }
.p2p-side-heading h2 { margin: 0 0 7px; color: var(--p2p-accent); font-size: .98rem; letter-spacing: .055em; }
.p2p-side-heading p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.p2p-side-total { margin-top: 17px; display: grid; gap: 4px; }
.p2p-side-total span { font-size: .72rem; color: var(--muted); }
.p2p-side-total strong { font-size: clamp(1.15rem, 2vw, 1.65rem); letter-spacing: -.035em; }
.p2p-side-total small { color: var(--muted-2); font-size: .7rem; }
.p2p-market-row { padding: 17px 20px; border-bottom: 1px solid rgba(77, 137, 218, .13); }
.p2p-market-row:last-child { border-bottom: 0; }
.p2p-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p2p-exchange-name { display: flex; align-items: center; gap: 9px; }
.p2p-exchange-name strong { font-size: .91rem; }
.p2p-exchange-badge {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; font-size: .76rem; font-weight: 800;
  background: rgba(255, 255, 255, .07); color: #f4f7ff;
}
.p2p-badge-binance { background: rgba(240, 185, 11, .13); color: #f0b90b; }
.p2p-badge-bybit { background: rgba(247, 166, 0, .11); color: #f7ae33; }
.p2p-badge-okx { background: rgba(245, 248, 255, .1); }
.p2p-sample { color: var(--muted); font-size: .7rem; text-align: right; }
.p2p-row-prices { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin: 13px 0 9px; }
.p2p-row-prices dt { font-size: .67rem; color: var(--muted); margin-bottom: 4px; }
.p2p-row-prices dd { margin: 0; font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums; }
.p2p-row-prices .p2p-median dd { font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--p2p-accent); letter-spacing: -.03em; }
.p2p-row-footer { display: flex; flex-wrap: wrap; gap: 8px; font-size: .72rem; color: var(--muted); }
.p2p-warning-text { color: #eabd58; }
.p2p-market-missing { opacity: .68; }
.p2p-row-details { margin-top: 12px; }
.p2p-row-details summary { color: #91b8e7; cursor: pointer; font-size: .72rem; width: fit-content; }
.p2p-detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 17px 0 10px; }
.p2p-detail-metrics dt { font-size: .67rem; color: var(--muted); margin-bottom: 4px; }
.p2p-detail-metrics dd { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
.p2p-capture { color: var(--muted-2); font-size: .67rem; line-height: 1.6; margin: 14px 0 0; }
.p2p-top-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.p2p-top-metric { padding: 18px 20px; border: 1px solid rgba(77, 137, 218, .19);
  border-radius: 14px; background: rgba(10, 28, 49, .72); display: grid; gap: 8px; min-width: 0; }
.p2p-top-metric span { color: var(--muted); font-size: .74rem; }
.p2p-top-metric strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.p2p-top-metric small { color: var(--muted-2); font-size: .7rem; }
.p2p-module-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.p2p-methodology { padding: 19px 20px; margin-top: 18px; border: 1px solid rgba(77, 137, 218, .17); border-radius: 14px; }
.p2p-methodology h2 { margin: 0 0 8px; font-size: .86rem; }
.p2p-methodology p { color: var(--muted); font-size: .75rem; line-height: 1.75; margin: 6px 0 0; }
.p2p-overview-note { padding: 0 20px 18px; margin: 0; color: var(--muted-2); font-size: .71rem; line-height: 1.7; }
.p2p-summary-sell { color: var(--muted); font-size: .7rem; line-height: 1.5; }
.p2p-comparison-note { color: var(--muted); font-size: .7rem; line-height: 1.65; margin: 0; }
.p2p-summary-card { cursor: pointer; }
@media (max-width: 1100px) {
  .p2p-row-heading { align-items: flex-start; }
  .p2p-sample { max-width: 125px; }
}
@media (max-width: 900px) {
  .p2p-sides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .p2p-top-metrics { grid-template-columns: 1fr; }
  .p2p-heading { flex-direction: column; gap: 16px; }
  .p2p-side-heading, .p2p-market-row { padding: 17px 15px; }
  .p2p-overview .p2p-sides-grid { padding: 0 12px 12px; }
  .p2p-overview .panel-header { flex-direction: column; align-items: flex-start; }
}


/* CISMANGT_P2P_DEPTH_V1 */
.depth-book [hidden], .depth-method-filter [hidden] { display: none !important; }
.depth-controls { display: grid; grid-template-columns: 160px 130px minmax(0, 1fr); gap: 14px 20px; padding: 18px 20px; margin-bottom: 16px; background: var(--panel-strong); border: 1px solid var(--line); border-radius: 14px; }
.depth-control { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .72rem; min-width: 0; }
.depth-control select, .depth-pair { font: inherit; font-size: .81rem; color: var(--text); background: #091d34; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; min-height: 39px; }
.depth-control select { width: 100%; cursor: pointer; color-scheme: dark; }
.depth-side-switch { display: flex; gap: 5px; background: #051324; border: 1px solid var(--line); padding: 4px; border-radius: 10px; }
.depth-side-switch button { flex: 1; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); padding: 8px 9px; font-size: .72rem; cursor: pointer; }
.depth-side-switch button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #1667d7, #3948df); border-color: #5689ff; }
.depth-method-filter { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.depth-filter-label { font-size: .72rem; color: var(--muted); display: block; margin-bottom: 9px; }
.depth-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.depth-chip { border: 1px solid var(--line); background: #0c2038; color: #bdcfe7; border-radius: 8px; padding: 7px 11px; font-size: .72rem; cursor: pointer; overflow-wrap: anywhere; }
.depth-chip[aria-pressed="true"] { background: #144c8e; border-color: #498ce6; color: #fff; }
.depth-chip:hover { border-color: var(--cyan); }
.depth-more-methods { margin-top: 10px; }
.depth-more-methods summary { cursor: pointer; color: #9ebee5; font-size: .72rem; width: fit-content; }
.depth-more-methods .depth-chips { margin-top: 10px; }
.depth-filter-note { margin: 11px 0 0; color: var(--muted-2); font-size: .7rem; line-height: 1.6; }
.depth-organic-label { margin-left: auto; font-size: .7rem; color: var(--green); }
.depth-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.depth-metric { display: flex; align-items: flex-start; gap: 10px; background: linear-gradient(120deg, rgba(12, 40, 63, .85), rgba(6, 23, 42, .95)); border: 1px solid var(--line); border-radius: 12px; padding: 16px 14px; min-width: 0; }
.depth-metric-icon { display: grid; place-items: center; width: 32px; height: 34px; flex-shrink: 0; font-size: 1.2rem; border-radius: 9px; color: var(--cyan); background: rgba(45, 133, 222, .12); }
.depth-metric:first-child .depth-metric-icon { color: var(--green); background: rgba(39, 225, 173, .1); }
.depth-metric:nth-child(2) .depth-metric-icon { color: var(--yellow); background: rgba(245, 200, 76, .08); }
.depth-metric div { min-width: 0; display: grid; gap: 5px; }
.depth-metric div > span { font-size: .7rem; color: var(--muted); }
.depth-metric strong { font-size: clamp(1.05rem, 1.6vw, 1.55rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.depth-metric small { color: var(--muted-2); font-size: .65rem; line-height: 1.6; }
.depth-books-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; }
.depth-books-heading h2 { font-size: .89rem; margin: 0; }
.depth-books-heading > span { color: var(--muted); font-size: .7rem; }
.depth-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.depth-book { --depth-accent: #27e1ad; --depth-bar: rgba(21, 212, 156, .32); --depth-zone: rgba(21, 212, 156, .07); border: 1px solid var(--line); background: var(--panel-strong); border-radius: 13px; min-width: 0; overflow: hidden; }
.depth-book[data-depth-book="sell_usdt"] { --depth-accent: #ff5c7f; --depth-bar: rgba(244, 61, 97, .34); --depth-zone: rgba(244, 61, 97, .07); }
.depth-book[data-selected="true"] { border-color: var(--depth-accent); }
.depth-book header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 16px 12px; }
.depth-book h2 { color: var(--depth-accent); font-size: .95rem; margin: 0 0 5px; }
.depth-book header p { font-size: .7rem; color: var(--muted); margin: 0; line-height: 1.6; }
.depth-book-count { font-size: .69rem; color: var(--muted); text-align: right; flex-shrink: 0; }
.depth-table-scroll { overflow-x: auto; scrollbar-color: #28476f #07182b; }
.depth-level-table, .depth-bank-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .72rem; }
.depth-level-table { min-width: 440px; }
.depth-level-table th, .depth-bank-table th { color: var(--muted); font-size: .63rem; font-weight: 500; padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.depth-level-table th:first-child, .depth-level-table th:last-child, .depth-bank-table th:first-child { text-align: left; }
.depth-level-table td, .depth-bank-table td { padding: 9px 10px; border-bottom: 1px solid rgba(78, 137, 226, .08); text-align: right; white-space: nowrap; }
.depth-level-table td:first-child { color: var(--depth-accent); text-align: left; }
.depth-level-table td:last-child { text-align: left; }
.depth-level-table tr[data-zone="true"] { background: var(--depth-zone); }
.depth-level-table .depth-cumulative-cell { position: relative; min-width: 103px; isolation: isolate; }
.depth-cumulative-bar { position: absolute; inset: 4px auto 4px 0; width: var(--depth-width, 0%); background: var(--depth-bar); border-left: 2px solid var(--depth-accent); border-radius: 0 3px 3px 0; z-index: -1; }
.depth-method-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 4px; margin-right: 3px; min-width: 22px; font-size: .55rem; color: #add7ff; background: #16385d; border: 1px solid #254975; border-radius: 5px; }
.depth-method-overflow { color: var(--muted); font-size: .62rem; }
.depth-book footer { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.depth-book footer > span { font-size: .67rem; color: var(--muted); line-height: 1.5; }
.depth-book footer .p2p-button { font-size: .68rem; padding: 7px 10px; white-space: nowrap; }
.depth-book-note { font-size: .7rem; color: var(--muted-2); line-height: 1.8; margin: 12px 0 19px; }
.depth-bottom { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.depth-bank-panel, .depth-reading { min-width: 0; background: var(--panel-strong); border: 1px solid var(--line); border-radius: 13px; padding: 17px 16px; }
.depth-bank-panel h2, .depth-reading h2 { margin: 0 0 8px; font-size: .85rem; }
.depth-bank-panel header p, .depth-reading p, .depth-subtotal-note { color: var(--muted-2); font-size: .67rem; line-height: 1.8; margin: 0 0 8px; }
.depth-bank-table { min-width: 465px; }
.depth-bank-table th, .depth-bank-table td { padding: 10px 7px; }
.depth-bank-table td:first-child { text-align: left; max-width: 175px; overflow: hidden; text-overflow: ellipsis; }
.depth-bank-coverage { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.depth-bank-coverage-track { width: 44px; height: 5px; border-radius: 4px; background: #162d49; overflow: hidden; }
.depth-bank-coverage-fill { display: block; height: 100%; width: var(--depth-width, 0%); background: var(--green); border-radius: 4px; }
.depth-subtotal-note { margin: 12px 0 0; }
.depth-reading ul { padding: 0 0 0 16px; margin: 13px 0; }
.depth-reading li { font-size: .75rem; color: #bdd0e6; line-height: 1.8; margin-bottom: 11px; }
.depth-reading li::marker { color: var(--cyan); }
.depth-reading p { margin-top: 17px; }
.depth-empty td { text-align: center !important; color: var(--muted) !important; white-space: normal; padding: 24px 16px; line-height: 1.7; }
.depth-exchange-comparison { margin-top: 23px; }
.depth-exchange-comparison > summary { color: #a9cbf4; cursor: pointer; padding: 15px 0; font-size: .81rem; }
.depth-exchange-comparison > .p2p-module-meta { margin-top: 8px; }
.depth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#view-p2p button:focus-visible, #view-p2p select:focus-visible, #view-p2p summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 1250px) { .depth-metric-icon { display: none; } .depth-bottom { grid-template-columns: 1fr; } }
@media (max-width: 1050px) { .depth-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .depth-controls { grid-template-columns: 1fr 1fr; } .depth-operation { grid-column: 1 / -1; } .depth-books { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .depth-controls { padding: 15px; gap: 12px; } .depth-organic-label { margin-left: 0; } .depth-metric { padding: 13px 11px; } .depth-metric strong { font-size: 1.12rem; } .depth-side-switch button { font-size: .68rem; } .depth-book header { padding: 15px 12px; } }

/* CISMANGT_P2P_PANORAMA_V1: filas estables, unidades por lado. */
.p2p-side-card[data-p2p-side="buy_usdt"], [data-p2p-operation="buy_usdt"] { --p2p-accent: #27e1ad; }
.p2p-side-card[data-p2p-side="sell_usdt"], [data-p2p-operation="sell_usdt"] { --p2p-accent: #ff6b7a; }
.p2p-analysis-button { background: #256eea; border: 1px solid #689aff; color: #fff; padding: 12px 17px; font-weight: 700; box-shadow: 0 5px 18px rgba(37,110,234,.18); }
.p2p-analysis-button:hover { background: #347ff4; }
.p2p-analysis-button:focus-visible, .p2p-overview-selector select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.p2p-overview-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 0 20px 18px; }
.p2p-overview-toolbar .p2p-module-meta { margin: 0; flex: 1; }
.p2p-overview-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.p2p-overview-selector select { color: #eef4ff; background: #0b2039; border: 1px solid #355577; border-radius: 9px; padding: 9px 12px; font: inherit; min-height: 40px; }
.depth-exchange-comparison > .p2p-overview-selector { margin-bottom: 16px; }
.p2p-side-total strong, .p2p-row-amount { color: #f5f8ff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p2p-side-total [data-p2p-total-ads] { color: #d5dfec; font-size: .78rem; }
.p2p-overview .p2p-sides-grid { padding-bottom: 12px; }
.p2p-side-heading { height: 100%; border-bottom: 0; }
.p2p-aligned-rows { display: grid; gap: 10px; margin: 12px 0 20px; }
.p2p-overview .p2p-aligned-rows { padding: 0 18px; margin: 0 0 18px; }
.p2p-aligned-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.p2p-aligned-row .p2p-market-row { border: 1px solid rgba(77,137,218,.2); border-radius: 13px; background: rgba(8,28,49,.78); min-width: 0; }
.p2p-operation-label { color: var(--p2p-accent); font-size: .72rem; font-weight: 650; }
.p2p-row-prices .p2p-best-reference dd { color: var(--p2p-accent); }
.p2p-aligned-row .p2p-row-footer { display: grid; gap: 6px; }
.p2p-row-amount { font-size: .78rem; font-weight: 600; }
.p2p-organic-count { color: #bdcadb; }
.p2p-aligned-row .p2p-sample { text-align: left; max-width: none; font-size: .68rem; margin: 10px 0 0; }
.p2p-aligned-row .p2p-capture { margin: 5px 0 0; }
.p2p-aligned-row .p2p-warning-text { font-size: .7rem; margin: 7px 0 0; }
.p2p-row-details summary { display: list-item; border: 1px solid #3e648a; border-radius: 8px; padding: 9px 12px; color: #d8eaff; font-size: .76rem; background: #123150; min-height: 38px; }
#bcv-difference-ves { display: block; margin-top: 7px; color: #dce6f4; font-size: .9rem; font-weight: 650; }
.p2p-variation-positive { color: #27e1ad !important; }
.p2p-variation-negative { color: #ff6b7a !important; }
.p2p-summary-card #usdt-ves-price { color: #27e1ad; }
.p2p-summary-sell { color: #ff6b7a; }
.depth-book[data-depth-book="buy_usdt"] { --depth-accent: #27e1ad; }
.depth-book[data-depth-book="sell_usdt"] { --depth-accent: #ff6b7a; }
.depth-side-switch [data-depth-side="buy_usdt"][aria-pressed="true"] { color: #27e1ad; border-color: #27e1ad; background: #0b3d35; }
.depth-side-switch [data-depth-side="sell_usdt"][aria-pressed="true"] { color: #ff6b7a; border-color: #ff6b7a; background: #40202d; }
#view-p2p[data-operation="buy_usdt"] #depth-reference-price, #view-p2p[data-operation="buy_usdt"] #depth-best-price { color: #27e1ad; }
#view-p2p[data-operation="sell_usdt"] #depth-reference-price, #view-p2p[data-operation="sell_usdt"] #depth-best-price { color: #ff6b7a; }
[data-p2p-best="buy_usdt"] { color: #27e1ad; }
[data-p2p-best="sell_usdt"] { color: #ff6b7a; }
@media (max-width: 900px) {
  .p2p-overview .p2p-sides-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p2p-overview .p2p-side-heading { padding: 16px; }
  .p2p-overview .p2p-side-total strong { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .p2p-overview .p2p-sides-grid { grid-template-columns: 1fr; }
  .p2p-aligned-row { grid-template-columns: 1fr; gap: 0; border: 1px solid #29425e; border-radius: 13px; overflow: hidden; }
  .p2p-aligned-row .p2p-market-row { border: 0; border-radius: 0; }
  .p2p-aligned-row .p2p-market-row + .p2p-market-row { border-top: 1px solid #29425e; }
  .p2p-aligned-rows { gap: 14px; }
  .p2p-overview .p2p-aligned-rows { padding: 0 12px; }
  .p2p-overview-toolbar { padding: 0 16px 16px; flex-direction: column; align-items: stretch; }
  .p2p-analysis-button { width: 100%; text-align: center; }
  .p2p-overview .panel-header { align-items: stretch; }
}

/* CISMANGT_P2P_RESUMEN_4_V1 */
.p2p-compact-grid { padding: 0 18px 18px; margin: 0; gap: 14px; align-items: stretch; }
.p2p-compact-card { min-width: 0; min-height: 210px; padding: 17px; justify-content: flex-start; gap: 12px; }
.p2p-compact-card .summary-card-header { min-height: 34px; gap: 9px; font-size: .87rem; }
.p2p-compact-card h3 { margin: 0; font: inherit; line-height: 1.35; }
.p2p-compact-card .asset-icon, .p2p-compact-card .p2p-exchange-badge { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; }
.p2p-compact-subtitle, .p2p-compact-footnote { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.p2p-compact-subtitle { margin-top: -5px; }
.p2p-compact-prices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
.p2p-compact-capital .p2p-compact-prices { grid-template-columns: 1fr; gap: 9px; }
.p2p-compact-block { min-width: 0; }
.p2p-compact-block dt { color: var(--p2p-accent); font-size: .66rem; font-weight: 650; margin-bottom: 4px; }
.p2p-compact-block dd { margin: 0; }
.p2p-compact-value { display: block; color: var(--p2p-accent); font-size: clamp(1.1rem,1.7vw,1.55rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
.p2p-compact-capital .p2p-compact-value { color: #f5f8ff; font-size: clamp(.95rem,1.13vw,1.18rem); }
.p2p-compact-count { display: block; margin-top: 4px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.p2p-compact-inventory { display: grid; gap: 6px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.p2p-compact-inventory > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; min-width: 0; }
.p2p-compact-inventory dt { color: var(--muted); font-size: .63rem; }
.p2p-compact-inventory dd { color: #e4edf9; font-size: .64rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.p2p-compact-footnote { margin-top: auto; font-size: .61rem; }
.p2p-compact-warning { color: #eabd58; }
.p2p-compact-loading { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 680px) {
  .p2p-compact-grid { padding: 0 12px 12px; }
  .p2p-compact-card { min-height: 0; padding: 16px; }
  .p2p-compact-value { font-size: 1.5rem; }
  .p2p-compact-capital .p2p-compact-value { font-size: 1.15rem; }
  .p2p-compact-inventory { margin-top: 0; }
}

/* CISMANGT_P2P_BANKS_V1 */
.bank-panel { --bank-accent: #27e1ad; min-width: 0; }
.bank-panel[data-side="sell_usdt"] { --bank-accent: #ff6b7a; }
.bank-panel .panel-header { align-items: flex-start; gap: 12px; }
.bank-panel .panel-header h2 { font-size: 1.06rem; }
.bank-panel .panel-header p { line-height: 1.6; }
.bank-panel .panel-header .p2p-button { flex-shrink: 0; font-size: .7rem; }
.bank-content { padding: 0 20px 20px; }
.bank-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.bank-side-switch { display: flex; border: 1px solid #2b496b; border-radius: 9px; padding: 4px; background: #07182b; gap: 4px; }
.bank-side-switch button { padding: 9px 13px; color: #a4b6ce; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: .74rem; cursor: pointer; min-height: 38px; }
.bank-side-switch [data-bank-side="buy_usdt"][aria-pressed="true"] { color: #27e1ad; border-color: #27e1ad; background: #0b3d35; }
.bank-side-switch [data-bank-side="sell_usdt"][aria-pressed="true"] { color: #ff6b7a; border-color: #ff6b7a; background: #40202d; }
.bank-total { display: grid; gap: 6px; margin-bottom: 14px; }
.bank-total > span, .bank-total > small { color: var(--muted); font-size: .71rem; line-height: 1.65; }
.bank-total strong { color: #f5f8ff; font-size: clamp(1.2rem, 2vw, 1.65rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bank-meta { display: grid; gap: 6px; margin: 0 0 14px; }
.bank-meta .p2p-date { font-size: .65rem; line-height: 1.6; }
.bank-map { position: relative; height: 310px; width: 100%; overflow: hidden; border-radius: 8px; background: #05111e; }
.bank-map-tile { position: absolute; padding: 9px; border: 2px solid #071522; border-radius: 4px; background: var(--bank-tile-color); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 5px; cursor: pointer; overflow: hidden; box-sizing: border-box; }
.bank-map-tile[data-unidentified="true"] { background: #283645; color: #e6edf5; }
.bank-map-tile:hover, .bank-map-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--bank-accent); }
.bank-tile-name { font-size: .8rem; font-weight: 600; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; min-width: 0; max-width: 100%; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bank-tile-share { font-size: clamp(.85rem, 1.35vw, 1.15rem); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.bank-map-tile[data-tight="true"] { padding: 4px; gap: 3px; }
.bank-map-tile[data-tight="true"] .bank-tile-name { font-size: .61rem; display: block; white-space: nowrap; text-overflow: ellipsis; }
.bank-map-tile[data-tight="true"] .bank-tile-share { font-size: .7rem; }
.bank-map-empty { display: grid; place-items: center; height: 100%; margin: 0; padding: 22px; color: var(--muted); font-size: .8rem; line-height: 1.8; text-align: center; }
.bank-note { color: var(--muted); font-size: .68rem; line-height: 1.8; margin: 12px 0; }
.bank-list { display: grid; gap: 6px; max-height: 242px; overflow-y: auto; scrollbar-color: #2c4b6f #091b30; padding: 2px; }
.bank-list-item { display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: left; color: #d7e4f5; border: 1px solid #233e5c; border-radius: 8px; padding: 9px 12px; background: #0b2139; font: inherit; cursor: pointer; min-height: 48px; }
.bank-list-item:hover, .bank-list-item[aria-pressed="true"] { border-color: var(--bank-accent); }
.bank-list-name { font-size: .75rem; overflow-wrap: anywhere; min-width: 0; }
.bank-list-name small { display: block; color: var(--muted); font-size: .65rem; margin-top: 4px; }
.bank-list-item > strong { color: var(--bank-accent); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-detail { border-top: 1px solid #29435e; margin-top: 17px; padding-top: 17px; }
.bank-detail h3 { font-size: .88rem; color: var(--bank-accent); margin: 0 0 13px; }
.bank-detail-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin: 0; }
.bank-detail-metrics dt { color: var(--muted); font-size: .64rem; line-height: 1.6; }
.bank-detail-metrics dd { margin: 5px 0 0; color: #f5f8ff; font-size: .78rem; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bank-depth-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.bank-depth-link { font-size: .67rem; padding: 10px 12px; min-height: 40px; }
.bank-panel button:focus-visible, .bank-panel select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#bcv-difference, #bcv-difference-ves { white-space: nowrap; }
@media (max-width: 600px) {
  .bank-content { padding: 0 16px 18px; }
  .bank-panel .panel-header { flex-direction: column; }
  .bank-controls { align-items: stretch; }
  .bank-controls > .p2p-overview-selector { flex: 1; }
  .bank-map { height: 300px; }
  .bank-list { max-height: 280px; }
  .bank-detail-metrics { grid-template-columns: 1fr; gap: 12px; }
  .bank-tile-name { font-size: .73rem; }
  .bank-tile-share { font-size: .92rem; }
  .comparison > .comparison-result { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .comparison-result > span { grid-column: 1 / -1; }
  .comparison-result #bcv-difference { text-align: left; }
  .comparison-result #bcv-difference-ves { text-align: right; margin-top: 0; }
}

.bottom-grid { align-items: start; }
.bank-list-details > summary { color: #a9cbf4; cursor: pointer; font-size: .75rem; padding: 11px 0; }
.bank-list-details[open] .bank-list { margin-top: 6px; }
.bank-list-details > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

#p2p-bcv-reference, #comparison-bcv { white-space: nowrap; }
#bcv-difference:not(.p2p-variation-positive):not(.p2p-variation-negative) { color: #dce6f4; }


/* CISMANGT_P2P_HISTORY_V1 */
.ph-panel { padding: 24px; min-width: 0; --ph-side: #27e1ad; }
.ph-panel[data-side="sell_usdt"] { --ph-side: #ff6b7a; }
.ph-controls, .ph-side, .ph-meta, .ph-chart-header, .ph-inspect { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ph-controls { justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); }
.ph-side { gap:4px; padding:4px; background:#06111f; border:1px solid var(--line); border-radius:12px; }
.ph-side button { background:transparent; color:var(--muted); border:0; border-radius:8px; padding:11px 15px; cursor:pointer; font-weight:600; }
.ph-side button[aria-pressed="true"] { background:color-mix(in srgb, var(--ph-side) 13%, transparent); color:var(--ph-side); }
.ph-select { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.ph-select select { font:inherit; font-size:14px; color:var(--text); background:#081a2e; border:1px solid var(--line-strong); border-radius:9px; padding:9px 30px 9px 12px; max-width:100%; }
.ph-meta { justify-content:space-between; margin:18px 0; color:var(--muted); font-size:12px; }
.ph-meta p { margin:0; }
#history-status[data-state="error"], #history-status[data-state="warning"] { color:var(--yellow); }
.ph-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ph-cards[data-count="1"] { grid-template-columns:minmax(0,1fr); max-width:450px; }
.ph-card { border:1px solid var(--line); border-radius:14px; background:rgba(4,15,29,.6); padding:20px; min-width:0; }
.ph-card h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px; }
.ph-dot { display:inline-block; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--ph-line); }
.ph-card small, .ph-card p { color:var(--muted); font-size:12px; line-height:1.6; margin:0; }
.ph-card strong { display:block; margin:10px 0 5px; font-size:clamp(24px,2.6vw,34px); color:var(--ph-side); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ph-card .ph-change { color:var(--text); font-size:13px; margin-bottom:6px; }
.ph-chart-header { justify-content:space-between; margin:28px 0 14px; }
.ph-chart-header h2 { margin:0 0 6px; font-size:17px; }
.ph-chart-header p, .ph-chart-note { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.ph-unit { color:var(--muted); font-size:12px; white-space:nowrap; }
.ph-chart { width:100%; height:310px; min-width:0; background:#06111f; border:1px solid var(--line); border-radius:12px; overflow:hidden; position:relative; }
.ph-chart svg { display:block; }
.ph-chart-empty { position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:var(--muted); text-align:center; font-size:14px; }
.ph-inspect { margin-top:16px; gap:20px; }
.ph-readout { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13px; }
.ph-readout span { display:flex; align-items:center; gap:7px; }
.ph-chart-note { margin-top:14px; }
.ph-table-wrap { max-height:470px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.ph-table-hint { display:none; color:var(--muted); font-size:12px; margin:0 0 12px; }
.ph-table { border-collapse:collapse; width:100%; min-width:830px; font-size:12px; font-variant-numeric:tabular-nums; }
.ph-table th, .ph-table td { padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap; text-align:right; }
.ph-table th { position:sticky; top:0; background:#0b2037; color:var(--muted); font-size:11px; font-weight:600; z-index:1; }
.ph-table th:nth-child(-n+2), .ph-table td:nth-child(-n+2), .ph-table th:last-child, .ph-table td:last-child { text-align:left; }
.ph-table tbody tr:last-child td { border-bottom:0; }
.ph-table tbody tr[data-selected="true"] { background:rgba(55,200,255,.045); }
.ph-table .ph-table-price { color:var(--ph-side); font-weight:600; }
.ph-badge { display:inline-flex; padding:3px 7px; border-radius:5px; color:var(--muted); background:rgba(145,167,199,.1); font-size:10px; margin-left:6px; }
.ph-quality { color:var(--muted); }
.ph-quality[data-quality="ok"] { color:var(--text); }
.ph-quality:not([data-quality="ok"]) { color:var(--yellow); }
.ph-method { margin-top:22px; font-size:12px; line-height:1.8; color:var(--muted); }
.ph-method summary { cursor:pointer; color:var(--text); }
.ph-method p { max-width:1000px; }
.ph-panel :is(button,select):focus-visible, .ph-table-wrap:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media(max-width:850px) { .ph-controls { justify-content:flex-start; } .ph-card { padding:16px; } .ph-readout { gap:12px; } .ph-table-hint { display:block; } }
@media(max-width:600px) {
  .ph-panel { padding:16px; } .ph-cards { grid-template-columns:1fr; gap:10px; }
  .ph-cards[data-count="1"] { max-width:none; }
  .ph-card { padding:15px 17px; display:grid; grid-template-columns:1fr auto; column-gap:12px; }
  .ph-card h3, .ph-card small { grid-column:1; }
  .ph-card strong { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; font-size:clamp(20px,6vw,25px); }
  .ph-card p { grid-column:1 / -1; }
  .ph-card .ph-change { margin-top:8px; }
  .ph-controls { gap:14px; } .ph-side { width:100%; } .ph-side button { flex:1; padding:11px 8px; }
  .ph-select { flex:1; min-width:115px; } .ph-select select { width:100%; }
  .ph-chart { height:270px; } .ph-chart-header { margin-top:24px; }
  .ph-inspect { align-items:flex-start; } .ph-inspect>.ph-select { flex:0 0 145px; }
  .ph-readout { flex:1; min-width:130px; flex-direction:column; align-items:flex-start; gap:8px; }
  .ph-meta { gap:8px; } .ph-table th, .ph-table td { padding:12px; }
}
@media(max-width:420px) { .ph-controls>.ph-select { flex:1 0 100%; } }


/* CISMANGT_P2P_EXCHANGES_V1 */
.ex-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 24px; margin-bottom:20px; }
.ex-toolbar label { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--muted); }
.ex-toolbar select { font:inherit; font-size:14px; color:var(--text); background:#081a2e; border:1px solid var(--line-strong); border-radius:9px; padding:10px 34px 10px 12px; min-width:185px; }
.ex-meta { text-align:right; font-size:12px; color:var(--muted); line-height:1.8; }
.ex-meta p { margin:0; color:var(--text); }
#exchanges-status[data-state="warning"], #exchanges-status[data-state="error"] { color:var(--yellow); }
.ex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.ex-grid[data-count="1"] { grid-template-columns:1fr; }
.ex-card { min-width:0; overflow:hidden; }
.ex-card-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 20px; border-bottom:1px solid var(--line); }
.ex-card-header h2 { display:flex; gap:9px; align-items:center; margin:0; font-size:19px; }
.ex-state { font-size:10px; font-weight:600; border:1px solid var(--line); border-radius:20px; padding:5px 8px; color:var(--muted); white-space:nowrap; }
.ex-state[data-state="ok"] { color:var(--cyan); background:rgba(55,200,255,.06); }
.ex-state[data-state="warning"] { color:var(--yellow); background:rgba(245,200,76,.05); }
.ex-markets { display:grid; grid-template-columns:1fr; }
.ex-market { --ex-side:#27e1ad; min-width:0; padding:22px 20px; }
.ex-market[data-side="sell_usdt"] { --ex-side:#ff6b7a; border-top:1px solid var(--line); }
.ex-market-label { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ex-market-label h3 { color:var(--ex-side); font-size:12px; margin:0; letter-spacing:.035em; }
.ex-price { color:var(--ex-side); font-size:clamp(25px,2.2vw,36px); font-weight:700; margin:12px 0 2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ex-reference { margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.ex-amount { display:flex; flex-direction:column; gap:6px; margin:20px 0 16px; }
.ex-amount span { color:var(--muted); font-size:11px; }
.ex-amount strong { font-size:18px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ex-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ex-stat { display:flex; flex-direction:column; gap:5px; }
.ex-stat small { color:var(--muted); font-size:11px; }.ex-stat strong { font-size:16px; }
.ex-capture { margin:17px 0 10px; font-size:11px; line-height:1.8; color:var(--muted); }
.ex-capture span { display:block; }
.ex-depth-link { width:100%; margin-top:4px; }
.ex-issues { margin:12px 0 0; padding-left:16px; color:var(--yellow); font-size:11px; line-height:1.7; }
.ex-details { border-top:1px solid var(--line); padding:17px 20px; }
.ex-details summary { cursor:pointer; color:var(--text); font-size:12px; }
.ex-range-grid { display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px; }
.ex-range-grid h3 { color:var(--muted); font-size:12px; margin:0 0 12px; }
.ex-range { display:grid; grid-template-columns:1fr; gap:11px; margin:0; }
.ex-range div { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:5px 10px; }
.ex-range dt { color:var(--muted); font-size:11px; }.ex-range dd { margin:0; color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ex-range-note { color:var(--muted); font-size:11px; line-height:1.7; margin:12px 0 0; }
.ex-explanation { padding:22px 24px; margin-top:20px; color:var(--muted); font-size:12px; line-height:1.8; }
.ex-explanation h2 { font-size:16px; color:var(--text); margin:0 0 12px; }.ex-explanation p:last-child { margin-bottom:0; }
.ex-grid[data-count="1"] .ex-markets, .ex-grid[data-count="1"] .ex-range-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ex-grid[data-count="1"] .ex-market[data-side="sell_usdt"] { border-top:0; border-left:1px solid var(--line); }
@media(max-width:1200px) {
  .ex-grid { grid-template-columns:1fr; }
  .ex-markets, .ex-range-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ex-market[data-side="sell_usdt"] { border-top:0; border-left:1px solid var(--line); }
}
@media(max-width:600px) {
  .ex-toolbar { padding:18px; gap:14px; }.ex-toolbar label { width:100%; }.ex-toolbar select { width:100%; }
  .ex-meta { text-align:left; }
  .ex-markets, .ex-range-grid, .ex-grid[data-count="1"] .ex-markets, .ex-grid[data-count="1"] .ex-range-grid { grid-template-columns:1fr; }
  .ex-market[data-side="sell_usdt"], .ex-grid[data-count="1"] .ex-market[data-side="sell_usdt"] { border-top:1px solid var(--line); border-left:0; }
  .ex-market { padding:20px 18px; }.ex-card-header { padding:19px 18px; }.ex-price { font-size:32px; }
  .ex-explanation { padding:20px 18px; }.ex-details { padding:17px 18px; }
}


/* CISMANGT_BCV_COMPARISONS_V1 */
.bca-panel { margin-top:20px; padding:24px; min-width:0; }
.bca-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.bca-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bca-heading h2 { margin:6px 0; font-size:21px; }.bca-heading p:not(.eyebrow) { margin:0; font-size:12px; color:var(--muted); line-height:1.7; }
.bca-controls { display:flex; align-items:end; gap:12px 18px; flex-wrap:wrap; margin:24px 0 14px; }
.bca-controls label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:12px; }
.bca-controls input[type="date"] { color-scheme:dark; font:inherit; color:var(--text); background:#081a2e; border:1px solid var(--line-strong); border-radius:9px; padding:10px 12px; min-height:40px; min-width:170px; }
.bca-controls .bca-prior { flex:1; flex-direction:row; align-items:center; align-self:center; gap:9px; padding:8px 0; min-width:230px; line-height:1.6; }
.bca-prior input { width:16px; height:16px; flex-shrink:0; accent-color:var(--cyan); }
.bca-status { color:var(--muted); font-size:12px; margin:14px 0; line-height:1.7; }
.bca-status[data-state="error"] { color:var(--yellow); }
.bca-current { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:rgba(55,200,255,.035); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:20px; }
.bca-current span { display:block; font-size:11px; color:var(--muted); }.bca-current strong { display:block; color:var(--cyan); font-size:31px; margin-top:8px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.bca-current p { font-size:12px; color:var(--muted); line-height:1.8; margin:0; }
.bca-panel[data-metric="idi"] .bca-current { background:rgba(158,122,255,.045); }.bca-panel[data-metric="idi"] .bca-current strong { color:#b99aff; }
.bca-table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.bca-table { width:100%; min-width:780px; border-collapse:collapse; text-align:left; font-size:12px; }
.bca-table th { background:rgba(4,15,28,.4); color:var(--muted); font-weight:500; font-size:11px; padding:13px 14px; white-space:nowrap; }
.bca-table td { border-top:1px solid var(--line); padding:15px 14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bca-table td:nth-child(n+4),.bca-table th:nth-child(n+4) { text-align:right; }
.bca-table .change-positive { color:var(--green); }.bca-table .change-negative { color:#ff6b7a; }.bca-table .change-neutral { color:var(--muted); }
.bca-table .bca-missing { color:var(--muted); }.bca-table td small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.bca-table td .bca-prior-label { color:var(--yellow); }
.bca-note { font-size:11px; line-height:1.8; color:var(--muted); margin:14px 0 0; }
.bca-scroll-hint { display:none; font-size:11px; color:var(--muted); margin:10px 0 0; }
@media(max-width:600px) {
  .bca-panel { padding:20px 18px; }.bca-heading { gap:14px; }.bca-heading h2 { font-size:19px; }
  .bca-controls { align-items:stretch; gap:12px; }.bca-controls label:first-child { width:100%; }.bca-controls input[type="date"] { width:100%; min-width:0; }
  .bca-controls .bca-prior { min-width:0; flex-basis:100%; }.bca-current { padding:17px; }.bca-current strong { font-size:27px; }
  .bca-scroll-hint { display:block; }
}


/* CISMANGT_CRYPTO_MARKET_V1 */
.cm-status { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.8; }.cm-status[data-state="warning"] { color:var(--yellow); }
.cm-top-grid { display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; }
.cm-composition,.cm-index,.cm-stable,.cm-btc-panel { padding:24px; min-width:0; }
.cm-kicker { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 9px; }
.cm-composition h2,.cm-index h2,.cm-stable h3 { margin:0 0 8px; font-size:17px; }
.cm-cap { display:block; font-size:clamp(24px,2.5vw,34px); letter-spacing:-.035em; font-weight:750; overflow-wrap:anywhere; margin:12px 0 20px; }
.cm-composition-body { display:flex; align-items:center; gap:25px; margin:0 0 20px; }
.cm-donut { width:155px; height:155px; flex:0 0 155px; border-radius:50%; position:relative; background:#12304c; }
.cm-donut::after { content:""; position:absolute; inset:23px; background:#091d32; border-radius:50%; }
.cm-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:1; font-size:21px; font-weight:700; }.cm-donut-center small { color:var(--muted); font-size:10px; font-weight:400; margin-top:4px; }
.cm-legend { display:flex; flex:1; flex-direction:column; gap:17px; min-width:0; }
.cm-legend-row { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:6px 8px; font-size:12px; }
.cm-dot { width:8px; height:8px; border-radius:50%; }.cm-legend-row small { grid-column:2/4; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.cm-volume { border-top:1px solid var(--line); padding-top:15px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:12px; }.cm-volume span { color:var(--muted); }.cm-volume strong { font-size:16px; }
.cm-source,.cm-note { color:var(--muted); font-size:10px; line-height:1.8; margin:14px 0 0; overflow-wrap:anywhere; }
.cm-source[data-state="warning"],.cm-unavailable { color:var(--yellow); }
.cm-index { display:flex; flex-direction:column; }.cm-index h2 { min-height:42px; line-height:1.4; }
.cm-index-value { font-size:54px; font-weight:750; letter-spacing:-.06em; line-height:1.2; margin-top:17px; color:var(--cyan); }
.cm-index-value small { color:var(--muted); font-size:17px; letter-spacing:0; font-weight:400; margin-left:7px; }
.cm-index-class { font-size:15px; margin:10px 0 18px; }.cm-gauge { height:8px; border-radius:10px; position:relative; margin:9px 0 7px; background:linear-gradient(90deg,#ff6b7a,#f5c84c,#27e1ad); }
.cm-gauge::after { content:""; position:absolute; top:-5px; bottom:-5px; left:var(--marker,50%); width:3px; background:var(--text); border:1px solid #091d32; border-radius:2px; transform:translateX(-50%); }
.cm-scale { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }.cm-index .cm-source { margin-top:auto; padding-top:16px; }
.cm-altcoin .cm-index-value { color:#b99aff; }.cm-altcoin .cm-gauge { background:linear-gradient(90deg,#2587ff,#9e7aff); }
.cm-year-extremes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 0; }.cm-year-extremes small,.cm-year-extremes span { display:block; color:var(--muted); font-size:10px; line-height:1.8; }.cm-year-extremes strong { font-size:15px; }
.cm-stable-section { margin:28px 0; }.cm-section-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:18px; }.cm-section-heading h2 { font-size:22px; margin:6px 0 0; }.cm-section-heading p:not(.eyebrow) { color:var(--muted); font-size:11px; line-height:1.8; margin:6px 0 0; }
.cm-stable-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.cm-stable-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.cm-stable h3 { margin:0; font-size:20px; }
.cm-stable-price { display:block; font-size:33px; font-weight:700; margin:20px 0 5px; }.cm-deviation { font-size:12px; color:var(--muted); line-height:1.8; margin:0 0 20px; }.cm-deviation strong { color:var(--text); font-weight:500; }
.cm-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.cm-stats div { min-width:0; }.cm-stats small { display:block; color:var(--muted); font-size:10px; margin-bottom:7px; }.cm-stats strong { display:block; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.cm-stats .change-positive { color:var(--green); }.cm-stats .change-negative { color:#ff6b7a; }
.cm-range-buttons { display:flex; gap:6px; flex-wrap:wrap; }.cm-range-buttons .active { color:var(--text); background:#246dff; border-color:#3789ff; }
.cm-range-coverage { color:var(--muted); font-size:12px; margin:20px 0; line-height:1.8; }.cm-range-coverage[data-state="partial"] { color:var(--yellow); }
.cm-btc-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:22px 0; }.cm-btc-values div { min-width:0; }.cm-btc-values small { display:block; color:var(--muted); font-size:11px; margin-bottom:9px; }.cm-btc-values strong { display:block; font-size:clamp(22px,2.3vw,30px); letter-spacing:-.03em; overflow-wrap:anywhere; }.cm-btc-values span { display:block; color:var(--muted); font-size:10px; line-height:1.8; margin-top:9px; }
.cm-btc-values .cm-last-close { color:var(--cyan); }.cm-btc-bar { height:10px; border-radius:10px; background:linear-gradient(90deg,#163358,#2587ff,#37c8ff); position:relative; margin:25px 0; }.cm-btc-bar::after { content:""; position:absolute; top:-5px; bottom:-5px; width:3px; background:var(--text); left:var(--marker,50%); transform:translateX(-50%); border-radius:3px; }
.cm-btc-change { font-size:13px; line-height:1.8; margin:0; }.cm-btc-change .change-positive { color:var(--green); }.cm-btc-change .change-negative { color:#ff6b7a; }
.cm-summary-hint { display:block; font-size:10px; color:var(--muted); margin-top:8px; }
@media(max-width:1200px) { .cm-top-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.cm-composition { grid-column:1/-1; }.cm-composition-body { max-width:650px; }.cm-index h2 { min-height:0; }.cm-index-value { margin-top:10px; } }
@media(max-width:600px) {
  .cm-top-grid,.cm-stable-grid { grid-template-columns:1fr; }.cm-composition { grid-column:auto; }.cm-composition,.cm-index,.cm-stable,.cm-btc-panel { padding:20px 18px; }
  .cm-composition-body { gap:17px; }.cm-donut { width:115px; height:115px; flex-basis:115px; }.cm-donut::after { inset:17px; }.cm-donut-center { font-size:18px; }.cm-donut-center small { font-size:9px; }
  .cm-legend { gap:15px; }.cm-legend-row { font-size:11px; }.cm-legend-row small { font-size:10px; }.cm-cap { font-size:27px; }
  .cm-btc-values { grid-template-columns:1fr; gap:20px; }.cm-btc-values strong { font-size:28px; }.cm-btc-values span { margin-top:5px; }.cm-section-heading h2 { font-size:20px; }
}
@media(max-width:350px) { .cm-composition-body { flex-direction:column; align-items:stretch; }.cm-donut { align-self:center; flex-basis:115px; }.cm-legend { width:100%; }.cm-stats strong { font-size:13px; } }


/* CISMANGT_ACCESS_V1 */
.access-restricted > :not(.access-gate){display:none!important}
.access-gate{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border:1px solid rgba(157,123,255,.28);border-radius:18px;background:rgba(157,123,255,.05);min-width:0}
.access-gate h2{margin:0;font-size:1.2rem;color:#f1f5ff}
.access-gate p{margin:0;color:#aab7ce;line-height:1.65;max-width:68ch}
.access-badge,.access-nav-badge{font-size:11px;font-weight:700;letter-spacing:.04em;color:#c9b6ff;background:rgba(157,123,255,.12);padding:4px 8px;border-radius:999px}
.access-nav-badge{margin-left:auto;flex-shrink:0}
.access-note{padding:14px 0;color:#c9b6ff;font-size:.9rem;line-height:1.6}
.access-limited{opacity:.52;cursor:default}
body[data-plan="free"] .bca-controls{display:none}
#account-plan-label{max-width:240px;white-space:normal}
@media(max-width:600px){.access-gate{padding:20px}.access-gate h2{font-size:1.05rem}}