:root {

    --ottoboni-dark: #282724;

    --ottoboni-dark-soft: #393733;

    --ottoboni-beige: #c8bba7;

    --ottoboni-gold: #a99478;

    --ottoboni-cream: #f5f2ed;

    --ottoboni-background: #efede9;

    --ottoboni-white: #ffffff;

    --ottoboni-text: #34322f;

    --ottoboni-muted: #827d75;

    --ottoboni-border: #ded9d1;

    --success: #2e7256;

    --success-background: #e7f4ed;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


body {
    color: var(--ottoboni-text);

    background:
        linear-gradient(
            140deg,
            #f7f5f1 0%,
            #efede9 45%,
            #e8e4de 100%
        );
}


.protected-page {
    -webkit-user-select: none;
    user-select: none;
}


input {
    -webkit-user-select: text;
    user-select: text;
}


/* LOGIN */

.login-wrapper {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
}


.login-card {

    width: 100%;
    max-width: 430px;

    padding: 48px 45px;

    background:
        rgba(255,255,255,.96);

    border-radius: 3px;

    border-top:
        4px solid var(--ottoboni-gold);

    box-shadow:
        0 25px 70px rgba(40,39,36,.13);
}


.logo-area {
    text-align: center;

    margin-bottom: 38px;
}


.logo-symbol {

    width: 76px;
    height: 76px;

    margin:
        0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--ottoboni-gold);

    background:
        var(--ottoboni-dark);

    color:
        var(--ottoboni-cream);

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    letter-spacing: 1px;
}


.logo-area h1 {

    margin: 0;

    color:
        var(--ottoboni-dark);

    font-family:
        Georgia,
        serif;

    font-weight: 400;

    font-size: 30px;
}


.subtitle {

    margin-top: 8px;

    color:
        var(--ottoboni-gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 11px;
}


.field {

    margin-bottom: 20px;
}


.field label {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .8px;

    color:
        var(--ottoboni-muted);
}


.field input {

    width: 100%;

    padding:
        14px 15px;

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

    border-radius: 2px;

    background:
        #faf9f7;

    font-size: 16px;

    outline: none;
}


.field input:focus {

    border-color:
        var(--ottoboni-gold);

    box-shadow:
        0 0 0 3px rgba(169,148,120,.13);
}


.primary-button {

    width: 100%;

    padding: 15px;

    margin-top: 5px;

    border: 0;

    border-radius: 2px;

    background:
        var(--ottoboni-dark);

    color:
        white;

    cursor: pointer;

    font-size: 13px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    font-weight: 600;
}


.primary-button:hover {

    background:
        var(--ottoboni-gold);
}


.alert {

    margin-bottom: 22px;

    padding: 13px 15px;

    background:
        #f8e6e4;

    border-left:
        3px solid #a8463d;

    color:
        #873b34;

    font-size: 13px;
}


.footer-text {

    margin-top: 28px;

    color:
        #aaa49b;

    text-align: center;

    font-size: 11px;
}


/* HEADER */

.ottoboni-header {

    min-height: 84px;

    padding:
        0 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        var(--ottoboni-dark);

    border-bottom:
        3px solid var(--ottoboni-gold);

    color:
        white;
}


.brand-area {

    display: flex;

    align-items: center;

    gap: 16px;
}


.brand-mark {

    width: 48px;
    height: 48px;

    display: flex;

    justify-content: center;
    align-items: center;

    border:
        1px solid var(--ottoboni-gold);

    color:
        var(--ottoboni-cream);

    font-family:
        Georgia,
        serif;

    font-size: 24px;
}


.brand-name {

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    letter-spacing: 1.8px;
}


.brand-subtitle {

    margin-top: 4px;

    color:
        #aaa397;

    font-size: 11px;

    letter-spacing: .8px;
}


.header-actions {

    display: flex;

    align-items: center;

    gap: 22px;
}


.secure-indicator {

    color:
        #c6bba8;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.logout-button {

    padding:
        10px 22px;

    border:
        1px solid #69655e;

    background:
        transparent;

    color:
        white;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 11px;
}


.logout-button:hover {

    border-color:
        var(--ottoboni-gold);

    color:
        var(--ottoboni-beige);
}


/* DASHBOARD */

.portal-container {

    width: calc(100% - 50px);

    max-width: 1220px;

    margin:
        42px auto 0;
}


.welcome-panel {

    background:
        var(--ottoboni-white);

    border-top:
        3px solid var(--ottoboni-gold);

    box-shadow:
        0 12px 35px rgba(55,50,43,.07);
}


.welcome-heading {

    padding:
        31px 35px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.section-label {

    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--ottoboni-gold);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;
}


.welcome-heading h1 {

    margin:
        3px 0 5px;

    font-family:
        Georgia,
        serif;

    font-size: 29px;

    font-weight: 400;

    color:
        var(--ottoboni-dark);
}


.welcome-heading p {

    margin: 0;

    color:
        var(--ottoboni-muted);

    font-size: 13px;
}


.authorized-badge {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 16px;

    background:
        var(--success-background);

    color:
        var(--success);

    border-radius:
        30px;

    font-size:
        12px;

    font-weight:
        600;
}


.authorized-dot {

    display: block;

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        var(--success);
}


.session-grid {

    display: grid;

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

    border-top:
        1px solid var(--ottoboni-border);
}


.session-item {

    min-height: 96px;

    padding:
        22px 28px;

    display: flex;

    align-items: center;

    gap: 14px;

    border-right:
        1px solid var(--ottoboni-border);
}


.session-item:last-child {

    border-right: 0;
}


.session-icon {

    font-size: 21px;

    filter:
        grayscale(1);
}


.session-title {

    display: block;

    margin-bottom: 6px;

    color:
        var(--ottoboni-muted);

    text-transform: uppercase;

    letter-spacing: .8px;

    font-size: 9px;
}


.session-item strong {

    display: block;

    font-size: 14px;

    font-weight: 600;
}


.digital-clock {

    font-family:
        "Courier New",
        monospace;

    font-size:
        17px !important;

    letter-spacing:
        1px;
}


.connection-time {

    font-family:
        "Courier New",
        monospace;

    color:
        var(--ottoboni-gold);

    font-size:
        17px !important;
}


/* UPLOAD */

.upload-panel {

    position: relative;

    margin-top: 27px;

    padding:
        55px 30px 42px;

    overflow: hidden;

    text-align: center;

    background:
        rgba(255,255,255,.93);

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

    box-shadow:
        0 12px 35px rgba(55,50,43,.05);
}


.upload-decoration {

    position: absolute;

    top: 0;

    left: 50%;

    width: 100px;

    height: 3px;

    background:
        var(--ottoboni-gold);

    transform:
        translateX(-50%);
}


.upload-icon {

    width: 60px;
    height: 60px;

    margin:
        0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--ottoboni-beige);

    font-size: 28px;

    color:
        var(--ottoboni-gold);
}


.upload-panel h2 {

    margin:
        5px 0 10px;

    font-family:
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 400;
}


.upload-description {

    margin:
        0 auto 25px;

    color:
        var(--ottoboni-muted);

    font-size:
        14px;
}


.upload-coming {

    display: inline-block;

    padding:
        12px 26px;

    background:
        var(--ottoboni-dark);

    color:
        white;

    font-size:
        12px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.upload-limits {

    margin-top:
        30px;

    display: flex;

    justify-content: center;

    gap: 35px;

    color:
        #878178;

    font-size:
        11px;
}


.portal-footer {

    padding:
        25px 5px 35px;

    display: flex;

    justify-content: space-between;

    color:
        #989188;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


/* RESPONSIVO */

@media(max-width: 850px) {

    .session-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .session-item:nth-child(2) {
        border-right:
            0;
    }

    .ottoboni-header {

        padding:
            18px 22px;
    }

    .secure-indicator {
        display: none;
    }

}


@media(max-width: 560px) {

    .session-grid {
        grid-template-columns:
            1fr;
    }

    .session-item {
        border-right:
            0;

        border-bottom:
            1px solid var(--ottoboni-border);
    }

    .welcome-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;
    }

    .upload-limits {

        flex-direction:
            column;

        gap:
            10px;
    }

    .brand-subtitle {
        display:
            none;
    }

}


/* ===== UPLOAD REAL ===== */

.drop-zone {
    max-width: 720px;

    margin:
        28px auto 0;

    padding:
        42px 25px;

    border:
        2px dashed var(--ottoboni-beige);

    background:
        #faf9f7;

    transition:
        .2s ease;
}


.drop-zone.drag-over {
    border-color:
        var(--ottoboni-gold);

    background:
        #f3eee7;
}


.drop-zone-title {
    color:
        var(--ottoboni-dark);

    font-family:
        Georgia,
        serif;

    font-size:
        20px;
}


.drop-zone-or {
    margin:
        12px 0;

    color:
        var(--ottoboni-muted);

    font-size:
        11px;

    text-transform:
        uppercase;
}


.select-files-button,
.send-files-button {

    padding:
        13px 26px;

    border: 0;

    background:
        var(--ottoboni-dark);

    color:
        white;

    cursor:
        pointer;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    font-size:
        11px;
}


.select-files-button:hover,
.send-files-button:hover {

    background:
        var(--ottoboni-gold);
}


.file-list {

    max-width:
        850px;

    margin:
        30px auto 0;

    text-align:
        left;
}


.file-row {

    position:
        relative;

    margin-bottom:
        12px;

    padding:
        15px 18px 20px;

    background:
        white;

    border:
        1px solid var(--ottoboni-border);
}


.file-info {

    padding-right:
        180px;
}


.file-name {

    overflow:
        hidden;

    color:
        var(--ottoboni-dark);

    font-size:
        13px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.file-size {

    margin-top:
        5px;

    color:
        var(--ottoboni-muted);

    font-size:
        10px;
}


.file-status {

    position:
        absolute;

    top:
        17px;

    right:
        18px;

    max-width:
        170px;

    color:
        var(--ottoboni-muted);

    font-size:
        10px;

    text-align:
        right;
}


.status-success {

    color:
        var(--success);
}


.status-error {

    color:
        #a8463d;
}


.progress-track {

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    overflow:
        hidden;

    background:
        #ece8e2;
}


.progress-bar {

    height:
        100%;

    background:
        var(--ottoboni-gold);

    transition:
        width .15s linear;
}


.upload-actions {

    margin-top:
        25px;
}


.clear-files-button {

    margin-left:
        10px;

    padding:
        12px 20px;

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

    background:
        transparent;

    color:
        var(--ottoboni-muted);

    cursor:
        pointer;

    text-transform:
        uppercase;

    font-size:
        10px;

    letter-spacing:
        1px;
}


.upload-summary {

    max-width:
        850px;

    margin:
        25px auto 0;

    padding:
        14px 18px;

    background:
        var(--success-background);

    color:
        var(--success);

    font-size:
        12px;

    font-weight:
        600;
}


/* ===== CRÉDITO CLOUDSERV ===== */

.cloudserv-credit {
    width: 100%;
    margin-top: 28px;
    padding: 12px 15px 18px;
    box-sizing: border-box;

    text-align: center;

    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3px;

    color: #aaa39a;
}

.cloudserv-credit span {
    margin: 0 5px;
}

.cloudserv-credit a {
    color: #928675;
    text-decoration: none;

    transition: color .2s ease;
}

.cloudserv-credit a:hover {
    color: #5f5549;
    text-decoration: underline;
}

@media (max-width: 600px) {

    .cloudserv-credit {
        line-height: 1.8;
        padding-left: 25px;
        padding-right: 25px;
    }

    .cloudserv-credit span {
        margin: 0 3px;
    }
}