/*
 * Comuniate · Modal de histórico de mercado
 * Compartido por ver_jugador.php y todas las páginas /mercado/*
 * Deliberadamente NO define .ficha-player para no alterar las tarjetas
 * de los listados de mercado.
 */

.market-modal{
    padding:2px 2px 0;
}

.market-modal .linea_titulo{
    margin-top:8px;
    margin-bottom:10px;
}

.market-modal__periods{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    margin-bottom:8px;
    padding:4px;
    border:1px solid #dbe7e1;
    border-radius:14px;
    background:#f0f6f3;
}

.market-modal__period{
    height:32px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#476257;
    font-size:11px;
    font-weight:900;
    line-height:1;
    transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.market-modal__period:hover,
.market-modal__period:focus{
    outline:none;
    background:#e4f2eb;
    color:#117953;
}

.market-modal__period:active{
    transform:translateY(1px);
}

.market-modal__period.is-active{
    background:linear-gradient(135deg,#26ad7b 0%,#13845d 100%);
    color:#fff;
    box-shadow:0 3px 9px rgba(19,132,93,.18);
}

.market-modal__period-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:28px;
    margin:0 3px 6px;
}

.market-modal__period-result-label{
    color:#71867c;
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.market-modal__period-result-value{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#7c8d85;
    font-size:12px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
}

.market-modal__period-result-value small{
    font-size:10px;
    font-weight:900;
    opacity:.78;
}

.market-modal__period-result-value.is-up{color:#118760;}
.market-modal__period-result-value.is-down{color:#cf4f5c;}
.market-modal__period-result-value.is-flat{color:#7d8f86;}

.market-modal__chart-card{
    position:relative;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.market-modal__chart-shell{
    position:relative;
    width:100%;
    min-height:208px;
    padding:0;
    overflow:visible;
}

.market-modal__chart{
    position:relative;
    width:100%;
    height:208px;
    min-width:0;
    cursor:crosshair;
}

.market-chart-svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.market-chart-grid{
    stroke:#e4eee9;
    stroke-width:1;
    stroke-dasharray:5 7;
    vector-effect:non-scaling-stroke;
}

.market-chart-area{
    stroke:none;
    pointer-events:none;
}

.market-chart-line{
    fill:none;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 3px 4px rgba(21,137,97,.08));
    pointer-events:none;
}

.market-chart-point-ring{
    fill:#fff;
    stroke-width:3;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
}

.market-chart-selected-guide{
    stroke:#85aa99;
    stroke-width:1;
    stroke-dasharray:4 5;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
}

.market-chart-selected-point{
    stroke:#fff;
    stroke-width:3;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
}

.market-chart-empty,
.market-chart-error{
    display:flex;
    min-height:190px;
    align-items:center;
    justify-content:center;
    color:#819489;
    font-size:12px;
    font-weight:800;
    text-align:center;
}

.market-chart-error{
    color:#b85a62;
}

.market-chart-tooltip{
    position:absolute;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:104px;
    padding:7px 9px;
    border:1px solid rgba(20,151,104,.16);
    border-radius:10px;
    background:rgba(255,255,255,.98);
    box-shadow:0 7px 18px rgba(18,58,44,.13);
    transform:translate(-50%,calc(-100% - 10px));
    pointer-events:none;
    white-space:nowrap;
}

.market-chart-tooltip[hidden]{
    display:none;
}

.market-chart-tooltip:after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-5px;
    width:9px;
    height:9px;
    background:#fff;
    border-right:1px solid rgba(20,151,104,.16);
    border-bottom:1px solid rgba(20,151,104,.16);
    transform:translateX(-50%) rotate(45deg);
}

.market-chart-tooltip__date{
    color:#70857b;
    font-size:9px;
    font-weight:900;
    line-height:1;
}

.market-chart-tooltip__price{
    color:#153b2c;
    font-size:12px;
    font-weight:950;
    line-height:1.1;
}

.market-modal__range{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:5px 11px 5px;
    color:#657b71;
    font-size:10px;
    font-weight:800;
}

.market-modal__range-item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}

.market-modal__range-item strong{
    color:#304d41;
    font-size:10.5px;
    font-weight:950;
}

.market-modal__range-dot{
    width:6px;
    height:6px;
    border-radius:999px;
    background:#b8c9c1;
}

.market-modal__range-item.is-max .market-modal__range-dot{
    background:#159a70;
}

.market-modal__history{
    margin-top:9px;
}

.market-modal__history-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 2px 5px;
}

.market-modal__history-title{
    margin:0;
    color:#29463b;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.025em;
}

.market-modal__history-count{
    color:#91a096;
    font-size:9px;
    font-weight:800;
}

.market-modal__history-list{
    border-top:1px solid #e2ebe7;
    border-bottom:1px solid #e2ebe7;
}

.market-modal__history-row{
    display:grid;
    grid-template-columns:64px minmax(105px,1fr) 118px;
    gap:8px;
    align-items:center;
    min-height:37px;
    padding:5px 4px;
    border-bottom:1px solid #edf2ef;
}

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

.market-modal__history-date{
    color:#566d62;
    font-size:11.5px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
}

.market-modal__history-delta{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    min-width:0;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
}

.market-modal__history-delta i{
    display:inline-flex;
    width:17px;
    height:17px;
    flex:0 0 17px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:9px;
    font-style:normal;
    font-weight:950;
}

.market-modal__history-delta strong{
    font-weight:950;
}

.market-modal__history-delta small{
    font-size:10px;
    font-weight:900;
    opacity:.78;
}

.market-modal__history-delta.is-up{color:#11865f;}
.market-modal__history-delta.is-up i{background:#e4f7ee;color:#11865f;}
.market-modal__history-delta.is-down{color:#cf4f5c;}
.market-modal__history-delta.is-down i{background:#fcebec;color:#cf4f5c;}
.market-modal__history-delta.is-flat{color:#84928b;}
.market-modal__history-delta.is-flat i{background:#eef2f0;color:#84928b;}

.market-modal__history-price{
    color:#16382b;
    font-size:13px;
    font-weight:950;
    line-height:1;
    text-align:right;
    white-space:nowrap;
}

.market-modal__footer{
    display:flex;
    justify-content:flex-end;
    padding-top:8px;
}

.market-modal__footer .btn{
    min-width:76px;
    padding:7px 13px;
    border-radius:9px;
    font-weight:800;
}

.market-modal__pulse{
    margin:6px 0 12px;
    padding:9px 10px;
    border:1px solid #e1ebe6;
    border-radius:12px;
    background:#f8fbf9;
}

.market-modal__pulse-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:7px;
}

.market-modal__pulse-head strong{
    color:#25483a;
    font-size:11px;
    font-weight:950;
}

.market-modal__pulse-head span,
.market-modal__pulse-updated{
    color:#819188;
    font-size:8.5px;
    font-weight:800;
}

.market-modal__pulse-values{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.market-modal__pulse-values > div{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:4px;
    min-width:0;
}

.market-modal__pulse-values strong{
    color:#17865f;
    font-size:14px;
    font-weight:950;
    line-height:1;
}

.market-modal__pulse-values span{
    color:#63796e;
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
}

.market-modal__pulse-updated{
    display:block;
    margin-top:6px;
    text-align:right;
}

@media(max-width:767px){
    .market-modal__chart-shell,
    .market-modal__chart{
        min-height:192px;
        height:192px;
    }

    .market-modal__history-row{
        grid-template-columns:57px minmax(100px,1fr) 105px;
        gap:6px;
        min-height:36px;
    }

    .market-modal__history-date{font-size:11px;}
    .market-modal__history-delta{font-size:11.2px;}
    .market-modal__history-delta small{font-size:9.2px;}
    .market-modal__history-price{font-size:12.2px;}

    .market-chart-tooltip{
        min-width:94px;
        padding:6px 8px;
    }

    .market-chart-tooltip__price{
        font-size:11px;
    }
}

@media(max-width:430px){
    .market-modal__period{font-size:10px;}
    .market-modal__period-result-value{font-size:11px;}
    .market-modal__period-result-value small{font-size:9px;}

    .market-modal__range{
        gap:7px;
        padding-left:8px;
        padding-right:8px;
        font-size:9px;
    }

    .market-modal__range-item strong{font-size:9.5px;}

    .market-modal__history-row{
        grid-template-columns:52px minmax(92px,1fr) 96px;
        gap:4px;
        min-height:33px;
        padding:4px 2px;
    }

    .market-modal__history-date{font-size:10px;}
    .market-modal__history-delta{gap:3px;font-size:10px;}
    .market-modal__history-delta small{font-size:8.7px;}

    .market-modal__history-delta i{
        width:14px;
        height:14px;
        flex-basis:14px;
        font-size:8px;
    }

    .market-modal__history-price{font-size:11px;}

    .market-modal__pulse{padding:8px;}
    .market-modal__pulse-values{gap:3px;}
    .market-modal__pulse-values strong{font-size:12px;}
    .market-modal__pulse-values span{font-size:8px;}
}