/* ============================================================
ARCHIVO NUEVO:
assets/styles/comprime-archivo.css
============================================================ */


/* ============================================================
VARIABLES
============================================================ */

:root {

    --compress-blue:
        #2563eb;

    --compress-blue-dark:
        #1d4ed8;

    --compress-blue-light:
        #eff6ff;

    --compress-green:
        #16a34a;

    --compress-green-light:
        #ecfdf3;

    --compress-purple:
        #7c3aed;

    --compress-purple-light:
        #f3e8ff;

    --compress-red:
        #dc2626;

    --compress-text:
        #0f172a;

    --compress-muted:
        #64748b;

    --compress-border:
        #dbe3ef;

    --compress-bg:
        #f7f9fc;

    --compress-white:
        #ffffff;

}



/* ============================================================
GENERAL
============================================================ */

* {

    box-sizing:
        border-box;

}


body {

    margin:
        0;

    background:
        var(--compress-bg);

    color:
        var(--compress-text);

    font-family:
        "Inter",
        sans-serif;

}


button,
input,
select {

    font:
        inherit;

}


button {

    border:
        0;

}


.compress-hidden {

    display:
        none !important;

}


.compress-container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

}



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

.compress-header {

    background:
        #ffffff;

}


.compress-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        27px;

}


.compress-nav a {

    color:
        #475569;

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.compress-nav a:hover,
.compress-nav a.active {

    color:
        var(--compress-blue);

}


.back-tools {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 14px;

    border:
        1px solid #dbe3ef;

    border-radius:
        10px;

    color:
        #334155;

    background:
        white;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

}



/* ============================================================
HERO
============================================================ */

.compress-hero {

    padding:
        42px 0 36px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );

    border-bottom:
        1px solid #e8edf5;

}


.compress-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        32px;

    color:
        #64748b;

    font-size:
        13px;

}


.compress-breadcrumb a {

    color:
        #64748b;

    text-decoration:
        none;

}


.compress-breadcrumb i {

    font-size:
        10px;

}


.compress-hero-content {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

}


.compress-main-icon {

    width:
        76px;

    height:
        76px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        21px;

    background:
        #fff1f2;

    color:
        #e11d48;

    font-size:
        37px;

}


.compress-kicker {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--compress-blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.compress-hero h1 {

    margin:
        0 0 8px;

    color:
        #0f172a;

    font-size:
        clamp(30px, 4vw, 44px);

    line-height:
        1.1;

}


.compress-hero-content p {

    max-width:
        690px;

    margin:
        0;

    color:
        #64748b;

    font-size:
        16px;

    line-height:
        1.7;

}


.local-process-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        25px;

    padding:
        11px 15px;

    background:
        #effdf5;

    border:
        1px solid #ccefd9;

    border-radius:
        12px;

    color:
        #32734a;

    font-size:
        13px;

}


.local-process-badge i {

    color:
        #16a34a;

    font-size:
        18px;

}



/* ============================================================
LAYOUT
============================================================ */

.compress-main {

    padding:
        42px 0 70px;

}


.compress-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) 310px;

    align-items:
        start;

    gap:
        28px;

}


.compress-work-card {

    min-width:
        0;

    padding:
        28px;

    background:
        white;

    border:
        1px solid #e0e7f0;

    border-radius:
        22px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .07);

}



/* ============================================================
DROP ZONE
============================================================ */

.compress-drop-zone {

    position:
        relative;

    min-height:
        480px;

    padding:
        55px 30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border:
        2px dashed #c4d2e5;

    border-radius:
        20px;

    background:
        #fbfdff;

    transition:
        .2s ease;

}


.compress-drop-zone:hover,
.compress-drop-zone.drag-over {

    border-color:
        var(--compress-blue);

    background:
        #f1f6ff;

}


.compress-drop-icon {

    width:
        100px;

    height:
        100px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        28px;

    border-radius:
        27px;

    background:
        #fff1f2;

    color:
        #e11d48;

    font-size:
        48px;

}


.compress-drop-zone h2 {

    margin:
        0;

    max-width:
        650px;

    font-size:
        28px;

    line-height:
        1.25;

}


.compress-drop-zone > p {

    margin:
        14px 0 28px;

    color:
        #64748b;

    font-size:
        16px;

}


.hidden-file-input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}



/* ============================================================
BOTONES
============================================================ */

.upload-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        12px;

}


.compress-primary-button,
.compress-secondary-button {

    min-height:
        50px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border-radius:
        12px;

    font-weight:
        750;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;

}


.compress-primary-button {

    color:
        white;

    background:
        var(--compress-blue);

    box-shadow:
        0 10px 22px rgba(37, 99, 235, .20);

}


.compress-primary-button:hover {

    background:
        var(--compress-blue-dark);

    transform:
        translateY(-1px);

}


.compress-secondary-button {

    color:
        #334155;

    background:
        #ffffff;

    border:
        1px solid #d8e1ec;

}


.compress-secondary-button:hover {

    background:
        #f8fafc;

}


.upload-features {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        20px;

    margin-top:
        30px;

    color:
        #64748b;

    font-size:
        13px;

}


.upload-features span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

}


.upload-features i {

    color:
        #16a34a;

}



/* ============================================================
CABECERA ARCHIVOS
============================================================ */

.selected-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


.panel-label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--compress-blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.selected-header h2,
.settings-title h2 {

    margin:
        0;

    font-size:
        23px;

}


.selected-header-actions {

    display:
        flex;

    gap:
        8px;

}


.small-action-button {

    min-height:
        39px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid #dbe3ef;

    border-radius:
        9px;

    color:
        #334155;

    background:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

}


.small-action-button:hover {

    background:
        #f8fafc;

}


.small-action-button.danger {

    color:
        #dc2626;

}



/* ============================================================
RESUMEN
============================================================ */

.files-summary {

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        20px;

    padding:
        17px 20px;

    border:
        1px solid #e0e8f2;

    border-radius:
        15px;

    background:
        #f8fbff;

}


.summary-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.summary-icon {

    width:
        41px;

    height:
        41px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    color:
        var(--compress-blue);

    background:
        #e8f0ff;

}


.summary-item div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.summary-item strong {

    color:
        #0f172a;

    font-size:
        17px;

}


.summary-item span {

    color:
        #64748b;

    font-size:
        11px;

}


.summary-divider {

    width:
        1px;

    height:
        37px;

    margin:
        0 26px;

    background:
        #dbe4ef;

}



/* ============================================================
LISTA DE ARCHIVOS
============================================================ */

.files-panel {

    overflow:
        hidden;

    margin-bottom:
        25px;

    border:
        1px solid #e0e7f0;

    border-radius:
        16px;

}


.files-panel-title {

    min-height:
        51px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        #f8fafc;

    border-bottom:
        1px solid #e2e8f0;

    color:
        #334155;

    font-size:
        13px;

    font-weight:
        700;

}


.files-panel-title div {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.files-panel-title > span {

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        500;

}


.files-list {

    max-height:
        355px;

    overflow-y:
        auto;

}


.file-row {

    min-height:
        70px;

    padding:
        12px 16px;

    display:
        grid;

    grid-template-columns:
        42px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        12px;

    border-bottom:
        1px solid #eef2f7;

}


.file-row:last-child {

    border-bottom:
        0;

}


.file-type-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #eef4ff;

    color:
        var(--compress-blue);

    font-size:
        19px;

}


.file-data {

    min-width:
        0;

}


.file-data strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #1e293b;

    font-size:
        13px;

}


.file-data span {

    display:
        block;

    margin-top:
        4px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #94a3b8;

    font-size:
        11px;

}


.remove-file {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        #94a3b8;

    background:
        transparent;

    cursor:
        pointer;

}


.remove-file:hover {

    color:
        #dc2626;

    background:
        #fff1f2;

}



/* ============================================================
CONFIGURACIÓN
============================================================ */

.compression-settings {

    padding:
        23px;

    border:
        1px solid #e0e7f0;

    border-radius:
        17px;

    background:
        #fbfcfe;

}


.settings-title {

    margin-bottom:
        20px;

}


.compression-settings-grid {

    display:
        grid;

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

    gap:
        18px;

}


.compress-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.compress-field > span {

    color:
        #334155;

    font-size:
        12px;

    font-weight:
        700;

}


.compress-field input,
.compress-field select {

    width:
        100%;

    height:
        45px;

    padding:
        0 13px;

    outline:
        0;

    border:
        1px solid #cfd9e6;

    border-radius:
        10px;

    color:
        #1e293b;

    background:
        #fff;

}


.compress-field input:focus,
.compress-field select:focus {

    border-color:
        var(--compress-blue);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);

}


.compress-field small {

    color:
        #94a3b8;

    font-size:
        10px;

    line-height:
        1.5;

}


.zip-name-input {

    display:
        flex;

    overflow:
        hidden;

    border:
        1px solid #cfd9e6;

    border-radius:
        10px;

    background:
        #ffffff;

}


.zip-name-input:focus-within {

    border-color:
        var(--compress-blue);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);

}


.zip-name-input input {

    min-width:
        0;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none !important;

}


.zip-name-input > span {

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    color:
        #64748b;

    background:
        #f8fafc;

    border-left:
        1px solid #e2e8f0;

    font-size:
        12px;

}



/* ============================================================
OPCIONES
============================================================ */

.compression-options {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        20px;

}


.compression-option {

    position:
        relative;

    padding:
        15px;

    display:
        grid;

    grid-template-columns:
        23px minmax(0, 1fr);

    gap:
        11px;

    border:
        1px solid #e0e7f0;

    border-radius:
        12px;

    background:
        white;

    cursor:
        pointer;

}


.compression-option input {

    position:
        absolute;

    opacity:
        0;

}


.option-check {

    width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid #cbd5e1;

    border-radius:
        6px;

    color:
        transparent;

    background:
        white;

}


.compression-option input:checked + .option-check {

    color:
        white;

    border-color:
        var(--compress-blue);

    background:
        var(--compress-blue);

}


.compression-option strong {

    display:
        block;

    color:
        #334155;

    font-size:
        12px;

}


.compression-option small {

    display:
        block;

    margin-top:
        4px;

    color:
        #94a3b8;

    font-size:
        10px;

    line-height:
        1.5;

}



/* ============================================================
PROGRESO
============================================================ */

.progress-panel {

    margin-top:
        22px;

    padding:
        17px;

    border:
        1px solid #dbe5f2;

    border-radius:
        14px;

    background:
        #f8fbff;

}


.progress-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        12px;

}


.progress-header > div {

    min-width:
        0;

}


.progress-header strong {

    display:
        block;

    color:
        #1e293b;

    font-size:
        12px;

}


.progress-header span {

    display:
        block;

    margin-top:
        3px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #64748b;

    font-size:
        10px;

}


.progress-track {

    width:
        100%;

    height:
        9px;

    overflow:
        hidden;

    border-radius:
        100px;

    background:
        #dce7f4;

}


.progress-bar {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    transition:
        width .15s linear;

}



/* ============================================================
BOTÓN COMPRIMIR
============================================================ */

.compress-actions {

    margin-top:
        26px;

    text-align:
        center;

}


.compress-main-button {

    min-width:
        240px;

    border:
        0;

}


.compress-main-button:disabled {

    opacity:
        .65;

    cursor:
        wait;

    transform:
        none;

}


.compress-actions p {

    margin:
        13px 0 0;

    color:
        #94a3b8;

    font-size:
        11px;

}


.compress-actions p i {

    margin-right:
        4px;

    color:
        #16a34a;

}



/* ============================================================
RESULTADO
============================================================ */

.result-state {

    padding:
        46px 15px;

    text-align:
        center;

}


.result-success-icon {

    width:
        82px;

    height:
        82px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 21px;

    border-radius:
        50%;

    color:
        white;

    background:
        #16a34a;

    font-size:
        40px;

    box-shadow:
        0 12px 28px rgba(22, 163, 74, .20);

}


.result-kicker {

    color:
        #16a34a;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .09em;

}


.result-state h2 {

    margin:
        8px 0 9px;

    font-size:
        28px;

}


.result-state > p {

    margin:
        0 auto 26px;

    max-width:
        590px;

    color:
        #64748b;

    font-size:
        14px;

    line-height:
        1.6;

}


.compressed-result {

    max-width:
        570px;

    margin:
        0 auto;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    text-align:
        left;

    border:
        1px solid #dce5ef;

    border-radius:
        14px;

    background:
        #f8fafc;

}


.compressed-result-icon {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        12px;

    color:
        #e11d48;

    background:
        #fff1f2;

    font-size:
        25px;

}


.compressed-result-info {

    min-width:
        0;

}


.compressed-result-info strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

}


.compressed-result-info span {

    display:
        block;

    margin-top:
        4px;

    color:
        #64748b;

    font-size:
        11px;

}


.result-stats {

    max-width:
        570px;

    margin:
        16px auto 0;

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px solid #e1e8f0;

    border-radius:
        13px;

}


.result-stats div {

    padding:
        14px 10px;

    border-right:
        1px solid #e1e8f0;

}


.result-stats div:last-child {

    border-right:
        0;

}


.result-stats span {

    display:
        block;

    color:
        #94a3b8;

    font-size:
        9px;

}


.result-stats strong {

    display:
        block;

    margin-top:
        5px;

    color:
        #334155;

    font-size:
        13px;

}


.result-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        26px;

}


.result-download {

    border:
        0;

}



/* ============================================================
INFO LATERAL
============================================================ */

.compress-info-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.compress-info-card,
.compress-tips {

    padding:
        23px;

    background:
        white;

    border:
        1px solid #e0e7f0;

    border-radius:
        18px;

}


.info-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    border-radius:
        12px;

    font-size:
        21px;

}


.info-icon.green {

    color:
        #16a34a;

    background:
        #dcfce7;

}


.info-icon.blue {

    color:
        #2563eb;

    background:
        #dbeafe;

}


.info-icon.purple {

    color:
        #7c3aed;

    background:
        #ede9fe;

}


.compress-info-card h3,
.compress-tips h3 {

    margin:
        0 0 11px;

    font-size:
        15px;

}


.compress-info-card p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.7;

}


.compress-tips h3 {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.compress-tips h3 i {

    color:
        #f59e0b;

}


.compress-tips ul {

    margin:
        0;

    padding-left:
        19px;

}


.compress-tips li {

    margin-bottom:
        9px;

    color:
        #64748b;

    font-size:
        11px;

    line-height:
        1.6;

}


.compress-tips li:last-child {

    margin-bottom:
        0;

}



/* ============================================================
PASOS
============================================================ */

.compress-how {

    padding:
        70px 0;

    background:
        white;

    border-top:
        1px solid #e8edf4;

}


.how-heading {

    margin-bottom:
        30px;

    text-align:
        center;

}


.how-heading span {

    color:
        var(--compress-blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.how-heading h2 {

    margin:
        8px 0 0;

    font-size:
        27px;

}


.compress-steps {

    display:
        grid;

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

    gap:
        18px;

}


.compress-step {

    position:
        relative;

    padding:
        28px;

    border:
        1px solid #e0e7f0;

    border-radius:
        17px;

    background:
        #fbfcfe;

}


.step-number {

    position:
        absolute;

    top:
        16px;

    right:
        16px;

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--compress-blue);

    background:
        #e6efff;

    font-size:
        11px;

    font-weight:
        800;

}


.compress-step > i {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--compress-blue);

    font-size:
        29px;

}


.compress-step h3 {

    margin:
        0 0 9px;

    font-size:
        15px;

}


.compress-step p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        11px;

    line-height:
        1.7;

}



/* ============================================================
FOOTER
============================================================ */

.compress-footer {

    padding:
        28px 0;

    background:
        #fff;

    border-top:
        1px solid #e2e8f0;

}


.compress-footer-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.compress-footer-inner p {

    margin:
        0;

    color:
        #94a3b8;

    font-size:
        11px;

}



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

@media (
    max-width:
    980px
) {

    .compress-layout {

        grid-template-columns:
            1fr;

    }


    .compress-info-column {

        display:
            grid;

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

    }


    .compress-nav {

        display:
            none;

    }

}



@media (
    max-width:
    720px
) {

    .compress-container {

        width:
            min(100% - 24px, 1180px);

    }


    .compress-hero {

        padding-top:
            27px;

    }


    .compress-hero-content {

        align-items:
            flex-start;

    }


    .compress-main-icon {

        width:
            60px;

        height:
            60px;

        font-size:
            29px;

        border-radius:
            17px;

    }


    .compress-work-card {

        padding:
            15px;

        border-radius:
            17px;

    }


    .compress-drop-zone {

        min-height:
            410px;

        padding:
            35px 18px;

    }


    .compress-drop-zone h2 {

        font-size:
            22px;

    }


    .upload-buttons {

        flex-direction:
            column;

        width:
            100%;

        max-width:
            310px;

    }


    .compress-primary-button,
    .compress-secondary-button {

        width:
            100%;

    }


    .selected-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .selected-header-actions {

        width:
            100%;

    }


    .small-action-button {

        flex:
            1;

        justify-content:
            center;

    }


    .compression-settings-grid,
    .compression-options {

        grid-template-columns:
            1fr;

    }


    .compress-info-column,
    .compress-steps {

        grid-template-columns:
            1fr;

    }


    .result-stats {

        grid-template-columns:
            1fr;

    }


    .result-stats div {

        border-right:
            0;

        border-bottom:
            1px solid #e1e8f0;

    }


    .result-stats div:last-child {

        border-bottom:
            0;

    }


    .compress-footer-inner {

        flex-direction:
            column;

        text-align:
            center;

    }

}



@media (
    max-width:
    500px
) {

    .back-tools {

        font-size:
            0;

    }


    .back-tools i {

        font-size:
            17px;

    }


    .compress-hero-content {

        display:
            block;

    }


    .compress-main-icon {

        margin-bottom:
            18px;

    }


    .files-summary {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;

    }


    .summary-divider {

        width:
            100%;

        height:
            1px;

        margin:
            0;

    }


    .upload-features {

        gap:
            10px 15px;

    }

}