/* ==========================================================
   Content Explorer
   Componentes específicos de la herramienta
========================================================== */


/* ==========================================================
   PROGRESS
========================================================== */

.ce-progress {

    margin-top: 30px;

}


.ce-progress-track {

    width: 100%;

    height: 8px;

    margin-top: 12px;

    background:
        var(--jr-border);

    border-radius: 20px;

    overflow: hidden;

}


.ce-progress-fill {

    width: 0;

    height: 100%;

    background:
        var(--jr-primary);

    border-radius: 20px;

    transition:
        width .25s ease;

}


/* ==========================================================
   ALERTS
========================================================== */

.ce-alert {

    margin-top: 20px;

    padding: 14px 16px;

    border-radius: 8px;

    font-size: 14px;

}


.ce-alert-error {

    background:
        rgba(220, 38, 38, .12);

    color:
        var(--jr-danger);

    border:
        1px solid rgba(220, 38, 38, .25);

}


/* ==========================================================
   RESULT HEADER
========================================================== */

.ce-results-title {

    gap: 20px;

    margin-bottom: 25px;

}


.ce-results-title h2 {

    margin-bottom: 6px;

}


.ce-final-url {

    color:
        var(--jr-text-light);

    font-size: 14px;

    word-break: break-all;

}


/* ==========================================================
   STATISTICS
========================================================== */

.ce-statistics {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

}


.ce-stat {

    padding: 18px;

    border:
        1px solid var(--jr-border);

    border-radius:
        var(--jr-radius);

    background:
        rgba(127, 127, 127, .04);

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.ce-stat-value {

    font-size: 1.7rem;

    font-weight: 700;

    color:
        var(--jr-primary);

}


.ce-stat-label {

    color:
        var(--jr-text-light);

    font-size: 13px;

}


/* ==========================================================
   TITLE RESULT
========================================================== */

.ce-title-result {

    padding: 15px 18px;

    border:
        1px solid var(--jr-border);

    border-radius: 8px;

    background:
        rgba(127, 127, 127, .04);

    font-size: 16px;

}


/* ==========================================================
   CONTENT HEADER
========================================================== */

.ce-content-header {

    margin-bottom: 20px;

}


/* ==========================================================
   CONTENT GROUP
========================================================== */

.ce-content-group {

    border:
        1px solid var(--jr-border);

    border-radius:
        var(--jr-radius);

    overflow: hidden;

    margin-bottom: 20px;

}


/* ==========================================================
   GROUP HEADER
========================================================== */

.ce-content-group-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 14px 18px;

    background:
        rgba(127, 127, 127, .06);

    border-bottom:
        1px solid var(--jr-border);

}


.ce-content-group-header h3 {

    margin: 0;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    font-size: 14px;

    color:
        var(--jr-primary);

}


.ce-content-group-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 28px;

    padding: 0 8px;

    border-radius: 30px;

    background:
        rgba(37, 99, 235, .12);

    color:
        var(--jr-primary);

    font-size: 12px;

    font-weight: 600;

}


/* ==========================================================
   CONTENT ITEMS
========================================================== */

.ce-content-item {

    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 12px;

    padding: 15px 18px;

    border-bottom:
        1px solid var(--jr-border);

}


.ce-content-item:last-child {

    border-bottom: none;

}


/* ==========================================================
   ITEM NUMBER
========================================================== */

.ce-content-item-number {

    color:
        var(--jr-text-light);

    font-size: 13px;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    padding-top: 2px;

}


/* ==========================================================
   ITEM TEXT
========================================================== */

.ce-content-item-text {

    color:
        var(--jr-text);

    line-height: 1.6;

    word-break: break-word;

}


/* ==========================================================
   EMPTY
========================================================== */

.ce-empty {

    padding: 30px;

    text-align: center;

    color:
        var(--jr-text-light);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    .ce-statistics {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .ce-results-title {

        align-items: flex-start;

        flex-direction: column;

    }


    .ce-content-item {

        grid-template-columns:
            30px 1fr;

        padding:
            14px;

    }

}


@media (max-width: 480px) {

    .ce-statistics {

        grid-template-columns:
            1fr 1fr;

        gap: 10px;

    }


    .ce-stat {

        padding: 14px;

    }


    .ce-stat-value {

        font-size: 1.4rem;

    }

}

/* ==========================================================
   EXTRACTION OPTIONS
========================================================== */

.ce-options {

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid var(--jr-border);

}


.ce-options h3 {

    margin-bottom: 18px;

    font-size: 1.1rem;

}


/* ==========================================================
   TAG OPTIONS
========================================================== */

.ce-options-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

}


.ce-checkbox {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    font-size: 14px;

}


.ce-checkbox input[type="checkbox"] {

    width: 17px;

    height: 17px;

    accent-color:
        var(--jr-primary);

    cursor: pointer;

}


/* ==========================================================
   EXTRA OPTIONS
========================================================== */

.ce-options-extra {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid var(--jr-border);

}


.ce-number-input {

    width: 80px;

    margin-top: 0;

    padding: 7px 9px;

}


.ce-number-input:disabled {

    opacity: .5;

    cursor: not-allowed;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 600px) {

    .ce-options-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .ce-options-extra .ce-checkbox {

        flex-wrap: wrap;

    }

}