/*
2026-08-17
/opt/ballenas/web/estilos.css  (destino en vpsfran: hosting de ballenas.dnns.es)
Hoja de estilos de BallenasDNNS con el tema Sunset Ride estandar de DNNS:
claro por defecto (crema + naranja) y oscuro opcional (purpura + coral).
El tema oscuro se activa con html[data-tema="oscuro"], que fija tema.js.
*/

:root {
    /* Tema CLARO: es el de por defecto en todas las webs DNNS. */
    --fondo:        #fdf6f0;
    --fondo-alt:    #f6ece3;
    --panel:        #ffffff;
    --borde:        #e8d9cc;
    --borde-fuerte: #d3bdac;
    --texto:        #2d1f1a;
    --texto-suave:  #6b5548;
    --texto-tenue:  #9a8375;
    --acento:       #e06030;
    --acento-suave: #fbe4d8;
    --verde:        #2f8f66;
    --rojo:         #d1503f;
    --morado:       #7a4fd0;
    --sombra:       0 1px 2px rgba(45, 31, 26, .06), 0 10px 30px -20px rgba(45, 31, 26, .45);
}

html[data-tema="oscuro"] {
    --fondo:        #12101a;
    --fondo-alt:    #1a1726;
    --panel:        #252237;
    --borde:        #332e48;
    --borde-fuerte: #453e60;
    --texto:        #f0ebe5;
    --texto-suave:  #b6acc4;
    --texto-tenue:  #857c96;
    --acento:       #f5845e;
    --acento-suave: #34243a;
    --verde:        #5dd39e;
    --rojo:         #ff6b6b;
    --morado:       #b07aff;
    --sombra:       0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -20px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- Barra superior ---------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
}

.barra-int {
    max-width: 78rem;
    margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logotipo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

.logotipo strong { color: var(--acento); font-weight: 700; }
.logotipo .icono { font-size: 1.25rem; }

.menu { display: flex; align-items: center; gap: .75rem; }

.estado {
    font-size: .8125rem;
    color: var(--texto-suave);
    padding: .25rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    white-space: nowrap;
}

.estado.ok     { color: var(--verde);  border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.estado.parcial{ color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.estado.error  { color: var(--rojo);   border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }

.btn-icono {
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .15s ease, background .15s ease;
}

.btn-icono:hover { border-color: var(--acento); }
.btn-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Contenido ---------- */
.contenido {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .9rem;
}

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    box-shadow: var(--sombra);
}

.rotulo {
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.dato {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.dato.verde { color: var(--verde); }
.dato.rojo  { color: var(--rojo); }
.apunte { font-size: .8125rem; color: var(--texto-tenue); }

/* ---------- Aviso ---------- */
.aviso {
    background: var(--acento-suave);
    border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
    border-radius: .6rem;
    padding: .8rem 1.1rem;
    font-size: .9375rem;
    color: var(--texto);
}

/* ---------- Bloques y tablas ---------- */
.bloque { display: flex; flex-direction: column; gap: .9rem; }

.bloque-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

h1 { margin: 0; font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
h2 { margin: .1rem 0 0; font-size: 1rem; font-weight: 600; word-break: break-all; }
h3 { margin: 1.4rem 0 .6rem; font-size: .9375rem; font-weight: 600; }

.controles { display: flex; gap: .5rem; }

.controles input, .controles select {
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .45rem .7rem;
    font: inherit;
    font-size: .875rem;
}

.controles input { min-width: 14rem; }
.controles input:focus-visible, .controles select:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
}

.marco-tabla {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    box-shadow: var(--sombra);
}

.tabla { border-collapse: collapse; width: 100%; font-size: .875rem; }

.tabla th, .tabla td {
    padding: .6rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla thead th {
    position: sticky;
    top: 0;
    background: var(--fondo-alt);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
}

.tabla thead th[data-orden] { cursor: pointer; user-select: none; }
.tabla thead th[data-orden]:hover { color: var(--acento); }
.tabla thead th.activa { color: var(--acento); }

.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--fondo-alt); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla.compacta tbody tr { cursor: default; }

.col-num {
    text-align: right;
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.col-pos { width: 3rem; color: var(--texto-tenue); text-align: right; }

td.cartera {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--texto-suave);
}

.vacio { text-align: center; color: var(--texto-tenue); padding: 2rem; white-space: normal; }

.pastilla {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .3rem;
    font-size: .75rem;
    letter-spacing: .02em;
}

.pastilla.entrada { background: color-mix(in srgb, var(--verde) 18%, transparent); color: var(--verde); }
.pastilla.salida  { background: color-mix(in srgb, var(--rojo) 18%, transparent); color: var(--rojo); }
.pastilla.cross   { background: color-mix(in srgb, var(--morado) 18%, transparent); color: var(--morado); }

/* ---------- Ficha lateral ---------- */
/* Ficha como ventana centrada: con el ancho de un modal grande caben las dos
   tablas una al lado de otra y se lee sin desplazarse en horizontal. */
.ficha {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(72rem, 94vw);
    max-height: 90vh;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: .8rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
    padding: 1.5rem 1.75rem 2rem;
    overflow-y: auto;
    z-index: 40;
}

/* A partir de tablet, el detalle se reparte en dos columnas. */
@media (min-width: 62rem) {
    .ficha-detalle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.75rem;
        align-items: start;
    }
}

.ficha-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.ficha-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}

.ficha-cifras > div {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .5rem;
    padding: .7rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ficha-cifras .dato { font-size: 1.05rem; }

.velo {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 10, .45);
    z-index: 30;
}

/* ---------- Pie ---------- */
.pie {
    border-top: 1px solid var(--borde);
    padding: 1.1rem 1.25rem 2rem;
    max-width: 78rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    font-size: .8125rem;
    color: var(--texto-tenue);
}

@media (max-width: 45rem) {
    .controles input { min-width: 8rem; }
    .ficha { padding: 1.1rem 1.1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Pestañas de vista ---------- */
.pestanas {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: .25rem;
}

.pestana {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .9375rem;
    padding: .55rem .9rem;
    cursor: pointer;
}

.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.pestana:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.btn-texto {
    background: none;
    border: 1px solid var(--borde);
    border-radius: .45rem;
    color: var(--texto-suave);
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .7rem;
    cursor: pointer;
}

.btn-texto:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- Formularios de ajustes ---------- */
.formulario {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .9rem 1rem;
}

.formulario input, .formulario select {
    background: var(--fondo);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .45rem .7rem;
    font: inherit;
    font-size: .875rem;
    min-width: 9rem;
    flex: 1 1 9rem;
}

.formulario input:disabled, .formulario select:disabled, .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn {
    background: var(--acento);
    border: 1px solid var(--acento);
    color: #fff;
    border-radius: .45rem;
    padding: .45rem 1.1rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.btn.secundario { background: transparent; color: var(--texto-suave); border-color: var(--borde); }

.btn-mini {
    background: none;
    border: 1px solid var(--borde);
    color: var(--texto-suave);
    border-radius: .35rem;
    padding: .2rem .55rem;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.btn-mini:hover { border-color: var(--rojo); color: var(--rojo); }

.check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

.panel-aviso {
    background: var(--acento-suave);
    border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
    border-radius: .6rem;
    padding: .85rem 1.1rem;
    font-size: .9375rem;
}

.vista { display: flex; flex-direction: column; gap: 1.1rem; }
.texto { color: var(--texto-suave); max-width: 68ch; margin: 0; font-size: .9375rem; }

.pastilla.tipo    { background: var(--acento-suave); color: var(--acento); }
.pastilla.oculta  { background: var(--fondo-alt); color: var(--texto-tenue); }
.pastilla.normal  { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.con-etiqueta     { color: var(--texto); font-weight: 600; font-family: inherit; }
.etiqueta-ficha   { font-size: .8125rem; color: var(--acento); }
.fuerte           { font-weight: 600; }
td.verde          { color: var(--verde); }
td.rojo           { color: var(--rojo); }

/* ---------- Ventana de acceso ---------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 10, .5);
    display: grid;
    place-items: center;
    z-index: 50;
    padding: 1rem;
}

.caja-login {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .7rem;
    padding: 1.5rem;
    width: min(24rem, 100%);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: var(--sombra);
}

.caja-login h2 { margin: 0; font-size: 1.15rem; }

.caja-login input {
    background: var(--fondo);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .55rem .75rem;
    font: inherit;
}

.caja-login .botones { display: flex; gap: .5rem; justify-content: flex-end; }
.error { color: var(--rojo); font-size: .875rem; margin: 0; }

/* ---------- Ocultar de verdad ----------
   Las reglas de display (grid en .modal, flex en .vista) ganan al atributo
   hidden del HTML, que solo aporta un display:none de la hoja del navegador.
   Sin esto, la ventana de acceso y las pestañas ocultas se ven igualmente. */
[hidden] { display: none !important; }

/* ---------- Precio y selector de moneda ---------- */
.precio {
    font-size: .8125rem;
    color: var(--texto-suave);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    white-space: nowrap;
}

.selector-moneda {
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .25rem .5rem;
    font: inherit;
    font-size: .8125rem;
}

/* ---------- Gráficas ----------
   Dibujadas a mano en SVG. preserveAspectRatio none deja que se estiren al ancho
   disponible, que es lo que interesa en una serie temporal. */
.grafica-caja { gap: .6rem; }

.grafica-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.grafica { width: 100%; }

.svg-grafica {
    width: 100%;
    height: 220px;
    display: block;
    overflow: visible;
}

.svg-grafica .area   { fill: color-mix(in srgb, var(--acento) 16%, transparent); stroke: none; }
.svg-grafica .linea  { fill: none; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
.svg-grafica .punta  { fill: var(--acento); }
.svg-grafica.barras rect { fill: color-mix(in srgb, var(--acento) 55%, transparent); }
.svg-grafica.barras rect:hover { fill: var(--acento); }

.grafica-pies {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--texto-tenue);
    padding-top: .2rem;
}

.tenue { color: var(--texto-tenue); }

/* ---------- Rótulos de la gráfica de barras ----------
   La gráfica rotulada no se estira (sin preserveAspectRatio none): un texto
   girado dentro de un SVG deformado se lee mal. */
.svg-grafica.rotulada { height: auto; }

.svg-grafica .eje { stroke: var(--borde); stroke-width: 1; }

.svg-grafica .rotulo-barra,
.svg-grafica .rotulo-fecha {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 9px;
    fill: var(--texto-tenue);
    text-anchor: start;
}

.svg-grafica .rotulo-barra { fill: var(--texto-suave); }
.svg-grafica .rotulo-fecha { text-anchor: end; }

/* ---------- Poner nombre a una cartera desde su ficha ---------- */
.nombrar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .75rem .9rem;
    margin-top: 1rem;
}

.nombrar input[type="text"] { flex: 1 1 12rem; }

.nombrar input, .nombrar select {
    background: var(--fondo);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .4rem .65rem;
    font: inherit;
    font-size: .875rem;
}

/* Distingue de un vistazo lo guardado solo en este navegador. */
.pastilla.local { background: color-mix(in srgb, var(--morado) 18%, transparent); color: var(--morado); }

/* Con una ventana abierta, el fondo no se desplaza. El relleno compensa el
   ancho de la barra de desplazamiento que desaparece: sin eso, el contenido
   pega un salto lateral y la ventana queda descentrada por esos pixeles. */
body.sin-scroll {
    overflow: hidden;
    padding-right: var(--barra-scroll, 0px);
}

/* ---------- Aviso de salidas hacia exchanges ---------- */
.aviso-exchange {
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .75rem 1rem;
    font-size: .9375rem;
    margin-top: 1rem;
}

/* Que se haya vendido en un exchange es la señal importante: se marca en rojo. */
.aviso-exchange.alerta {
    background: color-mix(in srgb, var(--rojo) 10%, transparent);
    border-color: color-mix(in srgb, var(--rojo) 40%, transparent);
}

.pastilla.salida-exchange { background: color-mix(in srgb, var(--rojo) 16%, transparent); color: var(--rojo); }
tr.fila-exchange td { background: color-mix(in srgb, var(--rojo) 6%, transparent); }

/* ---------- Saltar de una cartera a otra ---------- */
.ficha-botones { display: flex; align-items: center; gap: .5rem; }
tr.saltable { cursor: pointer; }
tr.saltable:hover td { background: var(--acento-suave); }
tr.saltable:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* ==========================================================================
   MÓVIL
   Con diez columnas, en un teléfono hay que arrastrar de lado para leer una
   fila. En pantalla estrecha se dejan solo las columnas que contestan a la
   pregunta "quién es y cuánto tiene", y el resto se consulta abriendo la ficha.
   ========================================================================== */
@media (max-width: 48rem) {

    body { font-size: 14px; }

    .barra-int {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem .9rem;
    }

    .menu { flex-wrap: wrap; gap: .5rem; row-gap: .4rem; }
    .precio { font-size: .75rem; }
    .estado { font-size: .75rem; }

    .pestanas {
        padding: 0 .5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pestanas::-webkit-scrollbar { display: none; }
    .pestana { padding: .5rem .6rem; font-size: .875rem; white-space: nowrap; }

    .contenido { padding: 1rem .75rem 3rem; gap: 1.2rem; }
    .resumen { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .tarjeta { padding: .7rem .8rem; }
    .dato { font-size: 1.1rem; }

    .bloque-cab { gap: .5rem; }
    .controles { flex-wrap: wrap; width: 100%; }
    .controles input { min-width: 0; flex: 1 1 8rem; }

    .tabla th, .tabla td { padding: .5rem .55rem; }

    /* Ranking: cartera, saldo y cambio del día. Lo demás, en la ficha. */
    #tabla-top th:nth-child(1),  #tabla-top td:nth-child(1),
    #tabla-top th:nth-child(3),  #tabla-top td:nth-child(3),
    #tabla-top th:nth-child(4),  #tabla-top td:nth-child(4),
    #tabla-top th:nth-child(7),  #tabla-top td:nth-child(7),
    #tabla-top th:nth-child(8),  #tabla-top td:nth-child(8),
    #tabla-top th:nth-child(9),  #tabla-top td:nth-child(9),
    #tabla-top th:nth-child(10), #tabla-top td:nth-child(10) { display: none; }

    /* Quién se mueve: cartera, neto y saldo. */
    #tabla-movidas th:nth-child(1), #tabla-movidas td:nth-child(1),
    #tabla-movidas th:nth-child(3), #tabla-movidas td:nth-child(3),
    #tabla-movidas th:nth-child(4), #tabla-movidas td:nth-child(4),
    #tabla-movidas th:nth-child(7), #tabla-movidas td:nth-child(7),
    #tabla-movidas th:nth-child(8), #tabla-movidas td:nth-child(8) { display: none; }

    /* Movimientos: fecha, origen, destino e importe. */
    #tabla-movs th:nth-child(2), #tabla-movs td:nth-child(2),
    #tabla-movs th:nth-child(6), #tabla-movs td:nth-child(6) { display: none; }

    /* La cartera puede partirse en dos líneas antes que forzar scroll lateral. */
    td.cartera { white-space: normal; word-break: break-word; font-size: .75rem; }

    /* La ficha ocupa la pantalla entera: en un móvil una ventana flotante con
       márgenes desperdicia el poco espacio que hay. */
    .ficha {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border: none;
        border-radius: 0;
        padding: 1rem .9rem 2rem;
    }

    .ficha-cifras { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .ficha-cifras .dato { font-size: .95rem; }
    h2 { font-size: .875rem; }
    .nombrar { padding: .6rem .7rem; }
    .nombrar input, .nombrar select, .nombrar button { flex: 1 1 100%; }
    .svg-grafica { height: 160px; }
    .formulario input, .formulario select { flex: 1 1 100%; }
}

/* En movimientos lo pinchable es cada cartera, no la fila entera: hay dos. */
td.saltable { cursor: pointer; }
td.saltable:hover { background: var(--acento-suave); text-decoration: underline; }
td.saltable:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }