/* ==========================
   TOPO
========================== */

.slides-top{

    height:90px;

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

    padding:0 20px;

    background:
    linear-gradient(
        to bottom,
        #ffdcdc,
        #ffa1a1
    );

    border-bottom:
    1px solid #d1a96c;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(0,0,0,.15);
}

.slides-logo{

    display:flex;
    align-items:center;
    gap:15px;
}

.slides-logo img{

    width:64px;
    height:64px;
}

.slides-logo h1{

    margin:0;


    text-shadow:
    0 1px 0 white;
}

.slides-logo p{

    margin:0;

}

/* ==========================
   BOTÃO INÍCIO
========================== */

.slides-top button{

    padding:10px 18px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

    background:
    linear-gradient(
        to bottom,
        #ffb5b5,
        #ff4d4d
    );

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 4px rgba(0,0,0,.15);

    transition:.2s;
}

.slides-top button:hover{

    transform:translateY(-1px);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(0,0,0,.2);
}

/* ==========================
   RIBBON
========================== */

.ribbon{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    padding:10px;

    background:
    linear-gradient(
        to bottom,
        #fbe0e0,
        #ff8164
    );

    border-bottom:
    1px solid #d3a05b;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);
}

.ribbon button{

    border:none;

    padding:10px 14px;

    border-radius:8px;

    cursor:pointer;

    font-weight:bold;

    background:
    linear-gradient(
        to bottom,
        #ffffff,
        #ffd4d4
    );

    box-shadow:
    inset 0 1px 0 white,
    0 2px 4px rgba(0,0,0,.12);

    transition:.2s;
}

.ribbon button:hover{

    transform:translateY(-1px);

    background:
    linear-gradient(
        to bottom,
        #fff8f8,
        #ffbaba
    );
}

/* ==========================
   ÁREA PRINCIPAL
========================== */

.workspace{

    display:flex;

    height:
    calc(100vh - 140px);
}

/* ==========================
   PAINEL LATERAL
========================== */

.sidebar{

    width:240px;

    overflow:auto;

    background:
    linear-gradient(
        to bottom,
        #ffffff,
        #f3f3f3
    );

    border-right:
    1px solid #cccccc;
}

.thumbnail{

    width:180px;

    height:110px;

    margin:15px auto;

    background:white;

    border:2px solid #cccccc;

    border-radius:10px;

    cursor:pointer;

    display:flex;

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

    text-align:center;

    padding:10px;

    font-size:14px;

    box-shadow:
    0 2px 6px rgba(0,0,0,.08);

    transition:.2s;
}

.thumbnail:hover{

    transform:scale(1.02);
}

.thumbnail.active{

    border-color:#ff5e3a;

    box-shadow:
    0 0 12px rgba(255,94,58,.35);
}

/* ==========================
   EDITOR
========================== */

.editor{

    flex:1;

    display:flex;

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

    background:
    linear-gradient(
        to bottom,
        #dfefff,
        #bdd8f5
    );
}

/* ==========================
   SLIDE
========================== */

.slide{

    width:960px;

    height:540px;

    background:
    linear-gradient(
        to bottom,
        #ffffff,
        #f8f8f8
    );

    border-radius:12px;

    border:
    1px solid #d7d7d7;

    padding:40px;

    box-shadow:
    0 6px 18px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* ==========================
   TÍTULO
========================== */

.slide-title{

    width:100%;

    border:none;

    outline:none;

    font-size:38px;

    font-weight:bold;

    color:#2a2a2a;

    background:transparent;
}

/* ==========================
   SUBTÍTULO
========================== */

.slide-subtitle{

    width:100%;

    height:300px;

    margin-top:20px;

    border:none;

    resize:none;

    outline:none;

    font-size:22px;

    line-height:1.6;

    background:transparent;

    color:#444444;
}

/* ==========================
   RESPONSIVO
========================== */

@media(max-width:1200px){

    .slide{

        width:90%;

        height:auto;

        min-height:540px;
    }
}

@media(max-width:768px){

    .workspace{

        flex-direction:column;
    }

    .sidebar{

        width:100%;

        height:160px;

        display:flex;

        overflow-x:auto;
    }

    .thumbnail{

        flex-shrink:0;
    }
}