/* Grupos con el mismo espaciado */
#token-state,
#cuma-state,
#dia-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    margin: 0;
    border-left: none;
    border-right: 1px solid #b5c3c8;
}

#token-state {
    border-left: 1px solid #b5c3c8;
}

/* Indicadores antes del texto */
#token-state > .circle-status,
#cuma-state > .circle-status,
#dia-state > .circle-status {
    display: block;
    float: none;
    flex-shrink: 0;
    margin: 0;
    transform: none;
    cursor: default;
}

/* Enlace TOKEN */
#token-link {
    display: inline-block;
    color: #337ab7;
    font-weight: bold;
}

#token-link:hover {
    text-decoration: underline;
}

/* Colores adicionales */
#token-status.pending {
    background: #999;
}

#token-status.warning {
    background: #ffd000;
}

/* Ancho fijo del contador */
#last-call > span {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ventana de detalle */
#token-call-detail {
    overflow: auto;
    padding: 12px;
    overflow-wrap: break-word;
}

#token-call-detail p {
    margin: 0 0 6px;
}

#token-call-detail pre {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Pantallas pequeñas */
@media only screen and (max-width: 1200px) {
    #token-state,
    #cuma-state,
    #dia-state {
        float: none;
        clear: both;
        width: fit-content;
    }

    #token-link {
        color: #000;
    }
}

#dia-state {
    border-right: none;
}