/* ============================================================
   PALETA — cambia aquí los colores de toda la plataforma
   ============================================================ */
/* ============================================================
   PALETAS — grafito es la de siempre, sin un solo cambio
   ============================================================ */
:root,
[data-tema="grafito"] {
    --color-fondo:        #0d1117;
    --color-superficie:   #161b22;
    --color-superficie-2: #1c232c;
    --color-borde:        #262e38;

    --color-texto:        #e6edf3;
    --color-texto-suave:  #8b98a5;

    --color-primario:        #9fe870;
    --color-primario-op:     rgba(159, 232, 112, 0.12);
    --color-primario-borde:  rgba(159, 232, 112, 0.25);
    --color-sobre-primario:  #0d1117;

    --color-precio:       #5b6b7d;
    --color-media-rapida: #f0883e;
    --color-media-lenta:  #9fe870;
    --color-neutro:       #4d5866;
    --color-volumen:      rgba(91, 107, 125, 0.35);

    --color-chat-ia:        rgba(106, 169, 240, 0.10);
    --color-chat-ia-borde:  rgba(106, 169, 240, 0.22);

    --color-tooltip:        #05080c;
    --color-tooltip-texto:  #e6edf3;
    --color-switch-off:     #39424e;
    --color-switch-bola:    #c9d2da;
    --sombra-flotante:      0 8px 26px rgba(0, 0, 0, .6);
}

/* "papel" en tonos crema/sepia (estilo lector de e-book): nada de blanco puro,
   para que no deslumbre en pantalla. */
[data-tema="papel"] {
    --color-fondo:        #ede1c9;
    --color-superficie:   #f7f0dd;
    --color-superficie-2: #f0e6cc;
    --color-borde:        #ddccaa;

    --color-texto:        #3a2f22;
    --color-texto-suave:  #7d6f56;

    --color-primario:        #a1592f;
    --color-primario-op:     rgba(161, 89, 47, 0.12);
    --color-primario-borde:  rgba(161, 89, 47, 0.30);
    --color-sobre-primario:  #fbf3e3;

    --color-precio:       #9c8a6f;
    --color-media-rapida: #5f7a5a;
    --color-media-lenta:  #a1592f;
    --color-neutro:       #b7a98c;
    --color-volumen:      rgba(156, 138, 111, 0.30);

    --color-chat-ia:        rgba(161, 89, 47, 0.07);
    --color-chat-ia-borde:  rgba(161, 89, 47, 0.20);

    --color-tooltip:        #3a2f22;
    --color-tooltip-texto:  #f7efdc;
    --color-switch-off:     #ddcda8;
    --color-switch-bola:    #fbf5e8;
    --sombra-flotante:      0 6px 20px rgba(58, 40, 20, .18);
}
/* "papel" es la única paleta clara: el resto usa color-scheme: dark por defecto */
[data-tema="papel"] input[type="date"],
[data-tema="papel"] input[type="number"] {
    color-scheme: light;
}

[data-tema="terminal"] {
    --color-fondo:        #0a0a0c;
    --color-superficie:   #121216;
    --color-superficie-2: #1a1a1f;
    --color-borde:        #2a2a32;

    --color-texto:        #e8e6e0;
    --color-texto-suave:  #8a8a92;

    --color-primario:        #f2a938;
    --color-primario-op:     rgba(242, 169, 56, 0.12);
    --color-primario-borde:  rgba(242, 169, 56, 0.28);
    --color-sobre-primario:  #0a0a0c;

    --color-precio:       #6b6b78;
    --color-media-rapida: #7fb3d5;
    --color-media-lenta:  #f2a938;
    --color-neutro:       #4a4a55;
    --color-volumen:      rgba(107, 107, 120, 0.35);

    --color-chat-ia:        rgba(127, 179, 213, 0.10);
    --color-chat-ia-borde:  rgba(127, 179, 213, 0.22);

    --color-tooltip:        #000000;
    --color-tooltip-texto:  #e8e6e0;
    --color-switch-off:     #3a3a44;
    --color-switch-bola:    #c9c9d2;
    --sombra-flotante:      0 8px 26px rgba(0, 0, 0, .7);
}

[data-tema="sobrio"] {
    --color-fondo:        #24231f;
    --color-superficie:   #2c2b26;
    --color-superficie-2: #34332d;
    --color-borde:        #403f38;

    --color-texto:        #ddd9d1;
    --color-texto-suave:  #97948c;

    --color-primario:        #5dcaa5;
    --color-primario-op:     rgba(93, 202, 165, 0.12);
    --color-primario-borde:  rgba(93, 202, 165, 0.26);
    --color-sobre-primario:  #14231d;

    --color-precio:       #7a776e;
    --color-media-rapida: #d99a5b;
    --color-media-lenta:  #5dcaa5;
    --color-neutro:       #55534b;
    --color-volumen:      rgba(122, 119, 110, 0.32);

    --color-chat-ia:        rgba(93, 202, 165, 0.08);
    --color-chat-ia-borde:  rgba(93, 202, 165, 0.18);

    --color-tooltip:        #14130f;
    --color-tooltip-texto:  #ddd9d1;
    --color-switch-off:     #4a493f;
    --color-switch-bola:    #c8c4ba;
    --sombra-flotante:      0 8px 26px rgba(0, 0, 0, .5);
}

/* Fuera de las paletas a propósito: ganar y perder no cambian nunca */
:root {
    --color-exito: #4ade80;
    --color-error: #f2545b;

    --radio:   14px;
    --radio-s: 8px;
    --sidebar: 220px;

    --fuente:      'Inter', system-ui, -apple-system, sans-serif;
    --fuente-dato: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

body {
    font-family: var(--fuente);
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Estructura ---------- */
/* Barra de scroll global con los colores del tema */
* {
    scrollbar-width: thin;                                    /* Firefox */
    scrollbar-color: var(--color-borde) transparent;         /* Firefox */
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-borde);
    border-radius: 5px;
    border: 2px solid var(--color-fondo);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario);
}


select:disabled, input:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.switch input:disabled + .switch-pista { opacity: .45; cursor: not-allowed; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    flex-shrink: 0;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marca-icono {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--color-primario);
    display: grid; place-items: center;
    color: #0d1117; font-weight: 700; font-size: 15px;
}
.marca-texto { font-weight: 600; letter-spacing: -0.01em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titulo {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--color-texto-suave); padding: 0 10px; margin-bottom: 8px;
}
.nav a {
    display: block; padding: 9px 12px; border-radius: var(--radio-s);
    color: var(--color-texto-suave); text-decoration: none; font-size: 13.5px;
    transition: background .15s, color .15s;
}
.nav a:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.nav a.activo { background: var(--color-primario-op); color: var(--color-primario); font-weight: 500; }
.nav a.inactivo { opacity: .4; pointer-events: none; }

.sidebar-pie { margin-top: auto; border-top: 1px solid var(--color-borde); padding-top: 16px; }
.usuario-nombre { font-size: 13px; font-weight: 500; }
.usuario-rol { font-size: 11px; color: var(--color-texto-suave); }
.sidebar-pie a { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--color-texto-suave); text-decoration: none; }
.sidebar-pie a:hover { color: var(--color-error); }

.contenido { flex: 1; padding: 26px 30px 20px; min-width: 0; }

.encabezado { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.encabezado h1 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.encabezado p { margin: 4px 0 0; color: var(--color-texto-suave); font-size: 13px; }

.seccion { display: none; }
.seccion.activa { display: block; }

.subpestanas {
    display: flex; gap: 4px; margin-bottom: 18px;
    border-bottom: 1px solid var(--color-borde);
}
.subpestana {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 9px 16px; font-size: 13px; font-family: inherit;
    color: var(--color-texto-suave); border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.subpestana:hover { color: var(--color-texto); }
.subpestana.activa { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 500; }
.subseccion { display: none; }
.subseccion.activa { display: block; }


#grafica, #grafica-capital, #grafica-capital-ia {
    max-height: 420px;
}

/* ---------- Barra de selector de activos ---------- */
.barra-activos {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 14px 16px 16px;
    margin-bottom: 18px;
}
.barra-activos-cabecera {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 11px;
}
.barra-activos-titulo {
    display: block; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-texto-suave); margin-bottom: 0px;
}
.barra-activos-nota { font-size: 11.5px; color: var(--color-primario); }
.fichas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fichas::-webkit-scrollbar { height: 6px; }
.fichas::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 3px; }

.ficha {
    display: flex; align-items: center; gap: 9px;
    margin-top:10px;
    padding: 10px 14px; flex-shrink: 0;
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s, transform .1s;
}
.ficha:hover { border-color: var(--color-texto-suave); transform: translateY(-1px); }
.ficha.activa {
    background: var(--color-primario-op);
    border-color: var(--color-primario);
}
.ficha.activa .ficha-nombre { color: var(--color-primario); }

.ficha-punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--color-texto-suave); }
.cat-índice        { background: #6aa9f0; }
.cat-indice        { background: #6aa9f0; }
.cat-materia-prima { background: #f0883e; }
.cat-cripto        { background: #c08bf0; }

.ficha-texto { display: flex; flex-direction: column; line-height: 1.25; }
.ficha-nombre { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ficha-symbol {
    font-family: var(--fuente-dato); font-size: 10.5px;
    color: var(--color-texto-suave); white-space: nowrap;
}

/* Tus mercados: lista personal reordenable por usuario (drag&drop) */
.lista-mercados { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.mercado-fila {
    display: flex; align-items: center; gap: 0;
    padding: 9px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio-s);
    background: var(--color-superficie-2);
    transition: border-color .15s, background .15s;
}
.mercado-fila:hover { border-color: var(--color-texto-suave); }
.mercado-fila.arrastrando { opacity: .35; }
.mercado-fila .ficha-punto { margin-right: 10px; }
.mercado-fila .ficha-texto { flex: 1 1 auto; min-width: 0; margin-right: 10px; }
.mercado-fila .ficha-nombre, .mercado-fila .ficha-symbol {
    overflow: hidden; text-overflow: ellipsis; display: block;
}
/* Asa de arrastre: seis puntos en cuadrícula, dibujados con box-shadow (sin
   depender de que la fuente del sistema tenga un glifo de "grip" decente). */
.mercado-asa {
    flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%;
    background: var(--color-texto-suave); cursor: grab;
    margin: 0 17px 0 3px;
    box-shadow:
        0 -6px 0 var(--color-texto-suave), 0 6px 0 var(--color-texto-suave),
        7px 0 0 var(--color-texto-suave), 7px -6px 0 var(--color-texto-suave), 7px 6px 0 var(--color-texto-suave);
}
.mercado-asa:active { cursor: grabbing; }
.mercado-acciones { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mercado-mover, .mercado-quitar {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    background: none; border: 1px solid var(--color-borde); border-radius: 6px;
    color: var(--color-texto-suave); font-size: 12px; line-height: 1;
}
.mercado-mover:hover { border-color: var(--color-primario); color: var(--color-primario); }
.mercado-quitar { font-size: 16px; margin-left: 6px; }
.mercado-quitar:hover { background: var(--color-error); border-color: var(--color-error); color: #fff; }

/* Botones de descarga de la app ntfy (Google Play / App Store), con la
   forma clásica de dos líneas pero en los colores del tema activo. */
.boton-tienda {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: var(--radio-s);
    background: var(--color-superficie-2); border: 1px solid var(--color-borde);
    color: var(--color-texto); text-decoration: none;
    transition: border-color .15s;
}
.boton-tienda:hover { border-color: var(--color-texto-suave); }
.boton-tienda-texto { display: flex; flex-direction: column; line-height: 1.2; }
.boton-tienda-etiqueta { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); }
.boton-tienda-nombre { font-size: 13.5px; font-weight: 600; }

/* Nombre editable: clic para ponerle un alias personal (solo lo ves tú) */
.mercado-nombre {
    cursor: pointer; width: fit-content; max-width: 100%;
    border-bottom: 1px dotted transparent; border-radius: 2px;
}
.mercado-nombre:hover, .mercado-nombre:focus-visible {
    border-bottom-color: var(--color-texto-suave); outline: none;
}
.mercado-nombre-input {
    font-family: inherit; font-size: 13px; font-weight: 500;
    padding: 2px 6px; margin: -3px 0; width: 100%; max-width: 200px;
    background: var(--color-superficie); border: 1px solid var(--color-primario);
    border-radius: 6px; color: var(--color-texto);
}
.mercado-confirmar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 24px; height: 24px; padding: 0; margin-right: 6px;
    background: var(--color-primario); border: 1px solid var(--color-primario);
    color: var(--color-sobre-primario); border-radius: 6px;
    font-size: 12px; font-weight: 700;
}
.mercado-confirmar[hidden] { display: none; }

/* Buscador de mercados nuevos (por nombre o símbolo) */
.lista-resultados-busqueda { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 10px 0 0; }
.resultado-busqueda-fila {
    border: 1px solid var(--color-borde); border-radius: var(--radio-s);
    background: var(--color-superficie-2); padding: 9px 12px;
}
.resultado-busqueda-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resultado-busqueda-cabecera .ficha-texto { flex: 0 1 auto; min-width: 200px; }
.resultado-busqueda-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 20px; }
.resultado-busqueda-ver, .resultado-busqueda-anadir {
    flex-shrink: 0; font-size: 12px; padding: 5px 12px;
}
.resultado-busqueda-anadir {margin-left: 20px;}
.resultado-busqueda-ver {
    background: none; border: 1px solid var(--color-borde); color: var(--color-texto);
}
.resultado-busqueda-ver:hover { border-color: var(--color-primario); color: var(--color-primario); }
.resultado-busqueda-detalle { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-borde); }
.resultado-busqueda-detalle[hidden] { display: none; }
.resultado-busqueda-grafica { height: 70px; }


/* ---------- Cotización destacada ---------- */
.cotizacion {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 22px 24px;
    margin-bottom: 18px;
    display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
}
.cotizacion-principal { min-width: 200px; }
.cotizacion-etiqueta { font-size: 12px; color: var(--color-texto-suave); margin-bottom: 6px; }
.cotizacion-precio {
    font-family: var(--fuente-dato); font-size: 32px; font-weight: 500;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.cotizacion-cambio { font-family: var(--fuente-dato); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sube { color: var(--color-exito); }
.baja { color: var(--color-error); }

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 20px 22px;
    margin-bottom: 18px;
    scroll-margin-top: 20px; 
}
.tarjeta-cabecera { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tarjeta-titulo { font-size: 14.5px; font-weight: 600; margin: 0; }
.tarjeta-sub { font-size: 12px; color: var(--color-texto-suave); margin: 3px 0 0; }

.tarjeta-sub-seccion { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-borde); }
.tarjeta-subtitulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--color-texto); font-weight: 600; margin: 0 0 12px;
    display: flex; align-items: center; gap: 7px;
}
.exposicion-grid { display: flex; flex-wrap: wrap; gap: 22px; }
.exposicion-col { flex: 1 1 320px; min-width: 260px; }
.exposicion-col h4 { font-size: 11.5px; color: var(--color-texto-suave); font-weight: 500; margin: 0 0 8px; }
.correlacion-alta { color: var(--color-error); font-weight: 600; }
.nota-activo-actual { font-size: 12.5px; color: var(--color-primario); font-weight: 500; margin: 3px 0 0; }

/* ---------- Controles ---------- */
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.controles-etiqueta { font-size: 12px; color: var(--color-texto-suave); }

select, button, input[type="text"], input[type="password"],
input[type="number"], input[type="date"] {
    font-family: inherit; font-size: 13px;
    padding: 7px 11px;
    background: var(--color-superficie-2);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-s);
    outline-offset: 2px;
    color-scheme: dark;
}
select, button { cursor: pointer; }
button:hover, select:hover { border-color: var(--color-texto-suave); }
button.primario {
    background: var(--color-primario); color: #0d1117;
    border-color: var(--color-primario); font-weight: 600;
}
#btn-forzar-analisis {margin-top:15px;}
.interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-texto); cursor: pointer; }
.interruptor input { accent-color: var(--color-primario); cursor: pointer; }



/* ---------- Panel de configuración ---------- */
.panel-controles {
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 0 0 18px;
    margin-bottom: 20px;
}
.panel-controles-cabecera {
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 18px;
}
.panel-controles-titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--color-texto); font-weight: 600;
}

.controles-grupos { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 0 18px; }
.grupo-control { display: flex; flex-direction: column; gap: 10px; }
.grupo-titulo {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-texto-suave); display: flex; align-items: center; gap: 7px;
}
.grupo-opciones { display: flex; flex-direction: column; gap: 11px; }
.grupo-filtros {
    padding-left: 28px; margin-left: 0;
    border-left: 1px solid var(--color-borde);
    padding-right: 28px; border-right: 1px solid var(--color-borde);
}

/* ---------- Switch ---------- */
.switch-fila { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-pista {
    position: absolute; inset: 0; cursor: pointer;
    background: #39424e; border-radius: 21px;
    transition: background .18s;
}
.switch-pista::before {
    content: ""; position: absolute;
    height: 15px; width: 15px; left: 3px; top: 3px;
    background: #c9d2da; border-radius: 50%;
    transition: transform .18s, background .18s;
}
.switch input:checked + .switch-pista { background: var(--color-primario); }
.switch input:checked + .switch-pista::before { transform: translateX(17px); background: #0d1117; }
.switch input:focus-visible + .switch-pista { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.switch-texto { font-size: 13px; color: var(--color-texto); user-select: none; }



/* ---------- Botón de ayuda ---------- */
.ayuda {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    background: var(--color-primario-op);
    border: 1px solid var(--color-primario);
    color: var(--color-primario);
    font-size: 11px; font-weight: 700; line-height: 1;
    cursor: pointer; position: relative; flex-shrink: 0;
    text-transform: none; letter-spacing: 0;
}
.ayuda:hover, .ayuda:focus {
    background: var(--color-primario); color: #0d1117; outline: none;
}
.ayuda::after {
    content: attr(data-ayuda);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    width: 270px; padding: 11px 14px;
    background: #05080c;
    border: 1px solid var(--color-primario);
    border-radius: var(--radio-s);
    color: var(--color-texto);
    font-size: 11.5px; font-weight: 400; line-height: 1.55;
    text-align: left; text-transform: none; letter-spacing: 0;
    opacity: 0; visibility: hidden; transition: opacity .15s;
    z-index: 60; pointer-events: none;
    box-shadow: 0 8px 26px rgba(0,0,0,.6);
}
.ayuda:hover::after, .ayuda:focus::after { opacity: 1; visibility: visible; }

@media (max-width: 760px) {
    .controles-grupos { gap: 18px; }
    .grupo-filtros {
        padding: 18px 0; margin: 0;
        border-left: none; border-right: none;
        border-top: 1px solid var(--color-borde);
        border-bottom: 1px solid var(--color-borde);
        width: 100%;
    }
    .ayuda::after { width: 220px; left: auto; right: -6px; transform: none; }
}



/* ---------- Métricas ---------- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.metrica {
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-s);
    padding: 14px 16px;
}
.metrica-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-suave); }
.metrica-val {
    display: block; font-family: var(--fuente-dato); font-size: 23px; font-weight: 500;
    margin: 6px 0 3px; font-variant-numeric: tabular-nums;
}
.metrica-sub { display: block; font-family: var(--fuente-dato); font-size: 12px; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }


/* ---------- Tablas ---------- */
.tabla-caja { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
    text-align: left; padding: 9px 12px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-texto-suave); font-weight: 500;
    border-bottom: 1px solid var(--color-borde); white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--color-superficie-2); }
td.dato { font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }

.etiqueta-cat {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11px; background: var(--color-superficie-2);
    border: 1px solid var(--color-borde); color: var(--color-texto-suave);
}
.etiqueta-direccion {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 500; border: 1px solid transparent;
}
.etiqueta-largo {
    color: var(--color-primario); border-color: var(--color-primario-borde);
    background: var(--color-primario-op);
}
.etiqueta-corto {
    color: var(--color-media-rapida); border-color: var(--color-media-rapida);
    background: rgba(0, 0, 0, .06);
}


/* ---------- Tabla de configuraciones ---------- */
.configs tr.mejor td { color: var(--color-primario); }
.configs tr.mejor td:first-child::after { content: " ★"; }
.configs tr.activa { background: var(--color-primario-op); }
.configs tr.activa td:first-child { box-shadow: inset 3px 0 0 var(--color-primario); }
p#estado-config {color:var(--color-primario);}
.aviso { font-size: 11.5px; color: var(--color-texto-suave); margin: 12px 0 0; line-height: 1.5; }
.prevision-debil { color: var(--color-texto-suave); font-style: italic; cursor: help; }
.op-notas {
    font-size: 12.5px; color: var(--color-texto-suave);
    margin: 4px 4px 0; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-borde);
}
.op-notas b { color: var(--color-texto); font-weight: 600; }
.op-grafica-caja { position: relative; height: 170px; padding: 10px 4px; }
tr.op-fila:hover { background: var(--color-superficie-2); }
tr.op-fila button {transition: background .5s, color .5s, border-color .5s; }
tr.op-fila button.op-cerrar:hover { background: var(--color-primario); color: #0d1117; border-color:var(--color-primario); }
tr.op-detalle td { background: var(--color-fondo); padding: 0; }


/* ---------- Acceso ---------- */
.caja-login {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    padding: 34px 30px;
    border-radius: var(--radio);
    max-width: 380px;
    margin: 8vh auto;
}
.caja-login .marca { justify-content: center; margin-bottom: 22px; }
.caja-login h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; text-align: center; }
.caja-login .sub { text-align: center; color: var(--color-texto-suave); font-size: 13px; margin: 0 0 24px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--color-texto-suave); }
.campo input { width: 100%; padding: 10px 12px; }
.caja-login button { width: 100%; padding: 11px; margin-top: 6px; }
.mensaje { padding: 10px 14px; border-radius: var(--radio-s); margin-bottom: 16px; font-size: 12.5px; }
.mensaje.error { background: rgba(242,84,91,.12); color: var(--color-error); border: 1px solid rgba(242,84,91,.25); }
.mensaje.info  { background: var(--color-primario-op); color: var(--color-primario); border: 1px solid rgba(159,232,112,.25); }


/* ---------- Noticias ---------- */
.noticia {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0; text-decoration: none;
    color: var(--color-texto); border-bottom: 1px solid var(--color-borde);
}
.noticia:last-child { border-bottom: none; }
.noticia:hover .noticia-titulo { color: var(--color-primario); }
.noticia-img {
    width: 92px; height: 62px; flex-shrink: 0;
    object-fit: cover; border-radius: var(--radio-s);
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde);
}
.noticia-img-vacia { opacity: .5; }
.noticia-cuerpo { min-width: 0; }
.noticia-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 11px; color: var(--color-texto-suave); margin-bottom: 5px;
}
.noticia-titulo { font-size: 13.5px; line-height: 1.45; transition: color .15s; }
.noticia-fecha { font-family: var(--fuente-dato); }
.vacio { color: var(--color-texto-suave); font-size: 13px; padding: 14px 0; }


/* ---------- Asistente IA ---------- */
.chat-contexto-nota {
    font-size: 11.5px;
    color: var(--color-primario);
    background: var(--color-primario-op);
    border: 1px solid rgba(159, 232, 112, .25);
    border-radius: var(--radio-s);
    padding: 6px 10px;
    margin: 0 0 8px;
    display: inline-block;
}
.chat-msg { display: flex; margin-bottom: 12px; }
.chat-msg.usuario { justify-content: flex-end; }
.chat-burbuja {
    max-width: 74%; padding: 11px 15px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.55; white-space: pre-wrap;
}
.chat-msg.usuario .chat-burbuja { background: var(--color-primario-op); border: 1px solid rgba(159,232,112,.25); }
.chat-msg.asistente {max-width:100%;}
.chat-msg.asistente .chat-burbuja {
    background: var(--color-chat-ia);
    border: 1px solid var(--color-chat-ia-borde);
    max-width: 100%;
}
.chat-fecha { font-size: 10.5px; color: var(--color-texto-suave); margin-top: 5px; font-family: var(--fuente-dato); }
.chat-entrada { display: flex; gap: 8px; align-items: flex-end; }
.chat-entrada textarea {
    flex: 1; resize: vertical; font-family: inherit; font-size: 13.5px; padding: 10px 12px;
    background: var(--color-superficie-2); color: var(--color-texto);
    border: 1px solid var(--color-borde); border-radius: var(--radio-s);
}
.chat-entrada button { padding: 11px 22px; }
.pensando { color: var(--color-texto-suave); font-style: italic; }
.equipo-item { padding: 12px 0; border-bottom: 1px solid var(--color-borde); }
.equipo-item:last-child { border-bottom: none; }
.equipo-meta { font-size: 11px; color: var(--color-texto-suave); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.equipo-texto { font-size: 13.5px; line-height: 1.5; }
.propuesta-mercado {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-superficie);
    border: 1px solid var(--color-primario-borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    max-width: 100%;
}
.propuesta-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.propuesta-info b { font-size: 14px; }
.propuesta-info span { font-size: 12px; color: var(--color-texto-suave); font-family: var(--fuente-dato); }
.propuesta-boton { flex-shrink: 0; }


/* ============ CHAT TIPO CONVERSACIÓN ============ */
.asistente-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 240px);
    min-height: 400px;
}
.conversaciones-barra {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.lista-conversaciones { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; }
.conversacion-fila {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--radio-s);
    cursor: pointer; transition: background .15s;
}
.conversacion-fila:hover { background: var(--color-superficie-2); }
.conversacion-fila.activa { background: var(--color-primario-op); color: var(--color-primario); }
.conversacion-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.conversacion-nombre {
    font-size: 13px; font-weight: 500; cursor: text;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-bottom: 1px dotted transparent;
}
.conversacion-nombre:hover, .conversacion-nombre:focus-visible { border-bottom-color: var(--color-texto-suave); outline: none; }
.conversacion-fecha { font-size: 10.5px; color: var(--color-texto-suave); font-family: var(--fuente-dato); }
.conversacion-nombre-input {
    font-family: inherit; font-size: 13px; font-weight: 500;
    padding: 2px 6px; margin: -3px 0; width: 100%;
    background: var(--color-superficie); border: 1px solid var(--color-primario);
    border-radius: 6px; color: var(--color-texto);
}
.conversacion-confirmar, .conversacion-quitar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 22px; height: 22px; padding: 0;
    border-radius: 6px; font-size: 12px; line-height: 1;
}
.conversacion-confirmar {
    background: var(--color-primario); border: 1px solid var(--color-primario);
    color: var(--color-sobre-primario); font-weight: 700;
}
.conversacion-confirmar[hidden] { display: none; }
.conversacion-quitar {
    background: none; border: 1px solid var(--color-borde); color: var(--color-texto-suave); font-size: 15px;
}
.conversacion-quitar:hover { background: var(--color-error); border-color: var(--color-error); color: #fff; }

.chat-contenedor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: calc(100vh - 240px);
    min-height: 400px;
}
.chat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.chat-msg {
    display: flex;
    max-width: 85%;
    animation: aparecer .25s ease;
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.usuario { align-self: flex-end; }
.chat-msg.asistente { align-self: flex-start; }

.chat-burbuja {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.6;
}
.chat-msg.usuario .chat-burbuja {
    background: var(--color-primario-op);
    border: 1px solid var(--color-primario-borde);
    border-bottom-right-radius: 4px;
}
.chat-msg.asistente .chat-burbuja {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-bottom-left-radius: 4px;
}
/* Formato dentro de las respuestas del asistente */
.chat-burbuja p { margin: 0 0 10px; }
.chat-burbuja p:last-child { margin-bottom: 0; }
.chat-burbuja b { color: var(--color-primario); font-weight: 600; }
.chat-burbuja ul { margin: 8px 0; padding-left: 20px; }
.chat-burbuja li { margin: 4px 0; }

.chat-pie {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-borde);
}
.chat-entrada {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 8px 8px 8px 16px;
}
.chat-entrada textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-texto);
    font-family: var(--fuente);
    font-size: 14.5px;
    line-height: 1.5;
    resize: none;
    max-height: 160px;
    padding: 6px 0;
}
.chat-entrada textarea:focus { outline: none; }
.chat-boton-enviar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-primario);
    color: var(--color-sobre-primario);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
}
.chat-boton-enviar:disabled { opacity: .4; cursor: not-allowed; }
.chat-contexto-nota {
    font-size: 11.5px;
    color: var(--color-texto-suave);
    margin: 0 0 8px;
    text-align: center;
}
.chat-disclaimer {
    font-size: 11px;
    color: var(--color-texto-suave);
    text-align: center;
    margin: 8px 0 0;
    opacity: .7;
}
/* Indicador de "escribiendo" */
.chat-escribiendo {
    display: flex; gap: 4px; padding: 4px 0;
}
.chat-escribiendo span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-texto-suave);
    animation: latido 1.4s infinite;
}
.chat-escribiendo span:nth-child(2) { animation-delay: .2s; }
.chat-escribiendo span:nth-child(3) { animation-delay: .4s; }
@keyframes latido {
    0%, 60%, 100% { opacity: .3; }
    30% { opacity: 1; }
}


/* ---------- Bloque de análisis del asistente ---------- */
.analisis-caja {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.analisis-cabecera {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.analisis-titulo { font-size: 13px; font-weight: 600; margin: 0; }
.analisis-fecha { font-size: 11.5px; color: var(--color-texto-suave); font-family: var(--fuente-dato); }
.analisis-web {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-primario); border: 1px solid var(--color-primario-borde);
    border-radius: 20px; padding: 2px 9px;
}
.analisis-comentario { font-size: 13.5px; line-height: 1.6; color: var(--color-texto); white-space: pre-wrap; }
.analisis-comentario p { margin: 0 0 10px; }
.analisis-comentario p:last-child { margin-bottom: 0; }
.analisis-comentario b { color: var(--color-primario); font-weight: 600; }
.analisis-refrescar {
    background: var(--color-primario);
    border: 1px solid var(--color-borde);
    color: var(--color-fondo);
    border-radius: var(--radio-s);
    width: 28px; height: 28px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.analisis-refrescar:hover {
    color: #FFF;;
}
.analisis-refrescar:disabled { opacity: .5; cursor: not-allowed; }

.desglose { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.desglose-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; padding: 4px 10px;
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde); border-radius: 20px;
}
.desglose-item b { font-family: var(--fuente-dato); font-variant-numeric: tabular-nums; }
.desglose-mas b { color: var(--color-exito); }
.desglose-menos b { color: var(--color-error); }
.desglose-cero b { color: var(--color-texto-suave); }
.desglose-total {
    background: var(--color-primario-op);
    border-color: var(--color-primario-borde);
    font-weight: 600;
}

.prevision-estadistica {
    background: var(--color-superficie-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-s);
    padding: 10px 14px; margin-bottom: 12px;
}
.prevision-estadistica-titulo {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-texto-suave); margin-bottom: 8px;
}
.prevision-estadistica-datos { display: flex; flex-wrap: wrap; gap: 14px; }
.prevision-dato { font-size: 12px; color: var(--color-texto-suave); }
.prevision-dato b {
    color: var(--color-texto); font-family: var(--fuente-dato);
    font-variant-numeric: tabular-nums; margin-left: 3px;
}

.abogado {
    border-left: 3px solid var(--color-media-rapida);
    background: rgba(240, 136, 62, 0.07);
    border-radius: 0;
    padding: 12px 16px; margin-top: 14px;
}
.abogado-titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-media-rapida); margin: 0 0 6px;
}
.abogado-texto { font-size: 13px; line-height: 1.55; color: var(--color-texto); white-space: pre-wrap; }
.analisis-fuentes { font-size: 11.5px; color: var(--color-texto-suave); margin-top: 12px; line-height: 1.5; }
.analisis-vacio { font-size: 13px; color: var(--color-texto-suave); padding: 6px 0; }


/* ---------- Barra de análisis en curso ---------- */
.barra-actualizando {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--color-primario);
    color: var(--color-sobre-primario);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    padding: 9px 16px;
    transform: translateY(-100%);
    transition: transform .3s ease;
    box-shadow: var(--sombra-flotante);
}
.barra-actualizando.visible { transform: translateY(0); }
.barra-actualizando-progreso {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: var(--color-sobre-primario);
    opacity: .5;
    width: 0%;
    transition: width 1s linear;
}
/* Empuja el contenido para que la barra no tape nada cuando está visible */
body.con-barra .layout { padding-top: 36px; transition: padding-top .3s; }


/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%; flex-direction: row; align-items: center;
        gap: 14px; padding: 12px 16px; overflow-x: auto;
        border-right: none; border-bottom: 1px solid var(--color-borde);
        position: static; height: auto;
    }
    .nav { flex-direction: row; gap: 4px; }
    .nav-titulo { display: none; }
    .sidebar-pie { margin-top: 0; border-top: none; padding-top: 0; margin-left: auto; white-space: nowrap; }
    .sidebar-pie a { margin-top: 2px; }
    .contenido { padding: 18px 16px 10px; }
    .cotizacion-precio { font-size: 26px; }
    .asistente-layout { flex-direction: column; height: auto; }
    .conversaciones-barra { flex: none; max-height: 160px; }
    .chat-contenedor { height: calc(100vh - 400px); }
}
@media (max-width: 700px) {
    /* Anclar el globo de ayuda al botón desborda la pantalla si el botón
       está cerca del borde: se fija a los márgenes del propio viewport
       (estilo "hoja" inferior), así nunca se sale ni se corta el texto. */
    .ayuda::after {
        position: fixed;
        left: 16px; right: 16px; bottom: 16px; top: auto;
        width: auto; max-width: none;
        transform: none;
    }
    .controles-grupos { gap: 14px; }
}
@media (max-width: 600px) {
    .ficha { padding: 8px 12px; }
    .ficha-nombre { font-size: 12.5px; }
    .noticia-img { width: 70px; height: 50px; }
    .mercado-fila { padding: 8px; }
    .mercado-asa { margin: 0 10px 0 2px; }
    .mercado-acciones { gap: 3px; }
    .mercado-mover, .mercado-quitar { width: 22px; height: 22px; }
}