/* VELA · estilos */
:root {
  --fondo: #EDF0F3; --sup: #FFFFFF; --sup2: #F5F7F9; --tinta: #16212C; --tinta2: #586676; --linea: #D3DAE1;
  --acento: #2747C7; --acento-tinta: #FFFFFF; --gana: #0A8562; --pierde: #C8392F; --gana-f: #E0F3EC; --pierde-f: #FBE6E3;
  --titulo: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --fondo: #0F1720; --sup: #17222E; --sup2: #1D2A38; --tinta: #E6EBF0; --tinta2: #95A3B2; --linea: #2A3848;
  --acento: #8298F7; --acento-tinta: #0F1720; --gana: #3ACB9D; --pierde: #F27A70; --gana-f: #12372E; --pierde-f: #45211F; color-scheme: dark; } }
:root[data-tema="oscuro"] {
  --fondo: #0F1720; --sup: #17222E; --sup2: #1D2A38; --tinta: #E6EBF0; --tinta2: #95A3B2; --linea: #2A3848;
  --acento: #8298F7; --acento-tinta: #0F1720; --gana: #3ACB9D; --pierde: #F27A70; --gana-f: #12372E; --pierde-f: #45211F; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.5 var(--texto); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.2; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cargando { padding: 4rem 1rem; text-align: center; color: var(--tinta2); }
.tenue { color: var(--tinta2); }
.gana { color: var(--gana); } .pierde { color: var(--pierde); }

/* Botones y campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: 0 .95rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup); cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--tinta2); }
.btn.pri { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.btn.pri:hover { filter: brightness(1.08); }
.btn.liso { border-color: transparent; background: none; }
.btn.liso:hover { background: var(--sup2); }
.btn.peligro { color: var(--pierde); }
.btn[disabled] { opacity: .55; cursor: default; }
label { display: grid; gap: .25rem; align-content: start; min-width: 0; font-size: .8125rem; font-weight: 500; color: var(--tinta2); }
input, select, textarea { width: 100%; min-width: 0; min-height: 40px; padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup); color: var(--tinta); font-size: 1rem; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.pista { font-size: .8125rem; font-weight: 400; color: var(--tinta2); }
.pista button { border: 0; background: none; padding: 0; color: var(--acento); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 5; background: var(--sup); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.barra-in { max-width: 1180px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .5rem; font: 700 1.3rem/1 var(--titulo); letter-spacing: -0.02em; }
.marca svg { width: 22px; height: 26px; }
.nav { display: flex; gap: .15rem; }
.nav button { border: 0; background: none; padding: .5rem .75rem; border-radius: 6px; cursor: pointer; color: var(--tinta2); font-weight: 500; }
.nav button[aria-current="page"] { color: var(--tinta); background: var(--sup2); }
.barra .acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.barra .sesion { display: flex; align-items: center; }
main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 5rem; }

/* Resumen del período */
.resumen { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, 1fr); gap: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 1rem; }
.resumen > div { padding: 1rem 1.15rem; border-left: 1px solid var(--linea); }
.resumen > div:first-child { border-left: 0; }
.resumen dt { font-size: .8125rem; color: var(--tinta2); }
.resumen dd { margin: .15rem 0 0; font: 600 1.25rem/1.2 var(--titulo); }
.resumen .neto dd { font-size: 2rem; letter-spacing: -0.02em; }
.resumen small { font: 400 .8125rem var(--texto); color: var(--tinta2); letter-spacing: 0; }
.resumen .neto > small { display: block; margin-top: .2rem; }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.filtros select { width: auto; min-height: 36px; padding: .25rem .5rem; font-size: .875rem; }

/* Lista de trades */
.tabla { background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.fila, .cab { display: grid; grid-template-columns: 76px minmax(150px, 1.2fr) 132px minmax(150px, 1fr) 100px 84px 56px minmax(90px, 1fr); gap: .75rem; align-items: center; padding: .6rem 1rem; }
.cab { font-size: .8125rem; color: var(--tinta2); border-bottom: 1px solid var(--linea); background: var(--sup2); }
.fila { width: 100%; border: 0; border-bottom: 1px solid var(--linea); background: none; text-align: left; cursor: pointer; }
.fila:last-child { border-bottom: 0; }
.fila:hover { background: var(--sup2); }
.der { text-align: right; white-space: nowrap; }
.par { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sello { font-size: .75rem; font-weight: 600; padding: .05rem .4rem; border-radius: 4px; }
.sello.long { background: var(--gana-f); color: var(--gana); } .sello.short { background: var(--pierde-f); color: var(--pierde); }
.sello.neutro { background: var(--sup2); color: var(--tinta2); border: 1px solid var(--linea); }
.sub { font-size: .8125rem; color: var(--tinta2); font-weight: 400; }
.rango { display: block; width: 120px; height: 22px; }
.neto-c { font-weight: 600; }
.anotar { color: var(--acento); font-size: .8125rem; }
.vacio { padding: 3rem 1.25rem; text-align: center; display: grid; gap: .9rem; justify-items: center; }
.vacio p { max-width: 46ch; color: var(--tinta2); }
.vacio .fila-btn { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* Estadísticas */
.panel { background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; padding: 1.15rem; margin-bottom: 1rem; }
.panel > h2 { margin-bottom: .75rem; }
.curva { width: 100%; height: 220px; display: block; }
.curva-pie { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--tinta2); margin-top: .35rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.cifras dt { font-size: .8125rem; color: var(--tinta2); }
.cifras dd { margin: 0; font: 600 1.15rem/1.3 var(--titulo); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dos .panel { margin: 0; }
.corte { width: 100%; border-collapse: collapse; font-size: .9rem; }
.corte th { text-align: left; font-weight: 500; font-size: .8125rem; color: var(--tinta2); padding: 0 0 .35rem; }
.corte td { padding: .3rem 0; border-top: 1px solid var(--linea); }
.corte td:first-child { width: 34%; overflow-wrap: anywhere; }
.corte .der { padding-left: .6rem; white-space: nowrap; text-align: right; }
.barrita { height: 8px; border-radius: 2px; min-width: 2px; }
.barra-celda { width: 30%; padding-left: .75rem !important; }

/* Cuentas */
.cuenta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .9rem 0; border-top: 1px solid var(--linea); }
.cuenta:first-of-type { border-top: 0; padding-top: 0; }
.cuenta .datos { flex: 1 1 240px; }
.cuenta .error { color: var(--pierde); font-size: .875rem; margin-top: .25rem; }
.progreso { height: 6px; background: var(--sup2); border-radius: 3px; overflow: hidden; margin-top: .5rem; }
.progreso i { display: block; height: 100%; background: var(--acento); transition: width .3s; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.form-grid .todo { grid-column: 1 / -1; }
.pasos { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--tinta2); max-width: 70ch; }
.pasos li { margin-bottom: .25rem; }
.pasos strong { color: var(--tinta); font-weight: 600; }

/* Entrada */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada .lado { padding: clamp(1.5rem, 6vw, 5rem); display: grid; align-content: center; gap: 1.25rem; }
.entrada .presenta { background: var(--tinta); color: var(--fondo); }
.entrada .presenta h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; max-width: 14ch; }
.entrada .presenta p { max-width: 44ch; opacity: .8; font-size: 1.0625rem; }
.entrada .presenta .marca { color: inherit; }
.entrada .velas { width: min(100%, 420px); height: auto; margin-top: 1rem; }
.entrada form { display: grid; gap: .85rem; width: min(100%, 380px); }
.entrada .cambio { font-size: .9rem; color: var(--tinta2); }
.entrada .cambio button { border: 0; background: none; color: var(--acento); cursor: pointer; padding: 0; text-decoration: underline; }
.error-form { color: var(--pierde); font-size: .9rem; min-height: 1.3em; }

/* Diálogo */
dialog { border: 1px solid var(--linea); border-radius: 12px; padding: 0; background: var(--sup); color: var(--tinta); width: min(720px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); box-shadow: 0 24px 60px rgba(8, 16, 26, .35); }
dialog::backdrop { background: rgba(8, 16, 26, .55); }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--sup); z-index: 1; }
.dlg-cuerpo { padding: 1.25rem; display: grid; gap: 1.25rem; }
.dlg-pie { display: flex; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--linea); position: sticky; bottom: 0; background: var(--sup); }
.dlg-pie .sep { margin-left: auto; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .75rem; }
legend { font: 600 1rem var(--titulo); padding: 0; margin-bottom: .6rem; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; min-height: 40px; }
.seg label { display: grid; place-items: center; cursor: pointer; font-size: .9375rem; color: var(--tinta); position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; min-height: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--tinta); color: var(--sup); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
.calculo { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: .75rem 1rem; background: var(--sup2); border-radius: 8px; }
.calculo div { font-size: .8125rem; color: var(--tinta2); }
.calculo b { display: block; font: 600 1.15rem var(--titulo); color: var(--tinta); }
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem 1rem; margin: 0; padding: .9rem 1rem; background: var(--sup2); border-radius: 8px; }
.ficha dt { font-size: .75rem; color: var(--tinta2); } .ficha dd { margin: 0; font-weight: 500; }
.captura-img { max-width: 100%; border-radius: 6px; border: 1px solid var(--linea); display: block; }

#aviso { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; display: grid; gap: .4rem; width: min(520px, calc(100vw - 2rem)); pointer-events: none; }
#aviso div { background: var(--tinta); color: var(--fondo); padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; }
#aviso div.mal { background: var(--pierde); color: #fff; }

@media (max-width: 860px) {
  .resumen { grid-template-columns: 1fr 1fr; }
  .resumen > div { border-left: 0; border-top: 1px solid var(--linea); }
  .resumen .neto { grid-column: 1 / -1; border-top: 0; }
  .cab { display: none; }
  .fila { grid-template-columns: 1fr auto; grid-template-areas: "par neto" "precios roe" "rango fecha"; gap: .15rem .75rem; padding: .75rem 1rem; }
  .fila > :nth-child(1) { grid-area: fecha; text-align: right; } .fila > :nth-child(2) { grid-area: par; }
  .fila > :nth-child(3) { grid-area: rango; } .fila > :nth-child(4) { grid-area: precios; }
  .fila > :nth-child(5) { grid-area: neto; } .fila > :nth-child(6) { grid-area: roe; }
  .fila > :nth-child(7), .fila > :nth-child(8) { display: none; }
  .dos, .entrada { grid-template-columns: 1fr; }
  .entrada .presenta { padding-block: 2rem; } .entrada .velas { display: none; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .barra-in { gap: .25rem .5rem; }
  .barra .sesion { margin-left: auto; order: 1; }
  .nav { order: 2; width: 100%; } .nav button { flex: 1; }
  .barra .acciones { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; margin: 0; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--sup); border-top: 1px solid var(--linea); }
  .barra .acciones .btn { flex: 1; }
  main { padding-bottom: 6.5rem; }
  #aviso { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }