@font-face{
    font-family:'adineue-light';
    src:url('adineuePRO-Light.otf');
}

@font-face{
    font-family:'adineue-black';
    src:url('adineuePRO-Black.otf');
}

@font-face{
    font-family:'adineue';
    src:url('adineue-pro.otf');
}

@font-face{
    font-family:'adineue-pro';
    src:url('adineue-pro.otf');
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
    font-family:'adineue-light';
    min-height:100vh;
    max-height:100vh;
    overflow:hidden;
}

.container{
    display:flex;
    min-height:100vh;
    max-height:100vh;
    overflow:hidden;
}

/* BOTON */
#toggleSidebar{
    position:fixed;
    top:20px;
    /* centrado dentro del sidebar de 350px: (350 - 50) / 2 = 150 */
    left:150px;
    width:50px;
    height:50px;
    border:3px solid #333;
    border-radius:50%;
    cursor:pointer;
    background:#ff6b35;
    color:#fff;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    z-index:1500;
    transition:left .3s, background .3s;
}

/* sidebar cerrado: botón pegado al borde izquierdo de pantalla, siempre visible */
#toggleSidebar.visible{
    left:8px;
}

#toggleSidebar:hover{
    background:#e0e0e0;
}

/* SIDEBAR */
.sidebar{
    position:relative;
    width:350px;
    background:linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    padding:20px;
    padding-top:70px;
    overflow-y:auto;
    overflow-x:hidden;
    transition:.3s;
    border-right:1px solid #e0e0e0;
    z-index:100;
    transform:translateX(0);
    box-shadow:-2px 0 5px rgba(0,0,0,.05);
}

.sidebar.closed{
    width:0;
    padding:0;
    overflow:hidden;
    border-right:none;
    transform:translateX(0);
}

.sidebar h2{
    margin-bottom:25px;
    color:#333;
    font-size:24px;
}



.sidebar label{
    display:block;
    margin-top:15px;
    margin-bottom:7px;
    font-weight:600;
    color:#444;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.sidebar input,
.sidebar textarea,
.sidebar select{
    width:100%;
    padding:10px 12px;
    border:1px solid #ddd;
    border-radius:5px;
    font-family:inherit;
    font-size:13px;
    transition:.2s;
}

.sidebar input:focus,
.sidebar textarea:focus,
.sidebar select:focus{
    outline:none;
    border-color:#666;
    box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

.sidebar button{
    justify-content: left;
    width:100%;
    padding:12px;
    margin-top:12px;
    border:none;
    border-radius:5px;
    background:#333;
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    font-size:13px;
}

.sidebar button:hover{
    background:#555;
}

.sidebar hr{
    margin:20px 0;
    border:none;
    border-top:1px solid #ddd;
}

.sidebar h3{
    margin-top:20px;
    margin-bottom:15px;
    font-size:14px;
    color:#333;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* AREA */
main{
    flex:1;
    overflow:auto;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:40px 30px;
    background:linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    min-width:0;
}

/* PLANTILLA */
#plantilla{
    width:1080px;
    height:1080px;
    background-image:url('fondo.png');
    background-size:cover;
    background-position:center;
    position:relative;
    padding:0px 60px 15px 60px;
    display:flex;
    flex-direction:column;
    transform:scale(.65);
    transform-origin:top center;
    flex-shrink:0;
    border-radius:8px;
    box-shadow:0 10px 40px rgba(0,0,0,.15);
    overflow:hidden;
    transition:transform .3s ease;
}

#plantilla.expanded{
    transform:scale(.85) !important;
}

/* BANDERIN Y SUPERIOR */
.superior{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0;
    margin:0;
    height:162px;
    min-height:162px;
    justify-content:flex-start;
    gap:20px;
}

.banderin{
    width:130px;
    display:block;
    margin:0 auto;
    margin-bottom:20px;
}

.logo-facultad{
    width:200px;
    margin:0;
}

/* MEDIA */
.media{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    text-align:center;
    gap:4px;
    flex:1;
    min-height:0;
    overflow:hidden;
}

#previewIntro{
    font-family:'adineue-light';
    font-size:28px;
    color:#333;
    letter-spacing:.5px;
    margin:0;
    line-height:1;
}

#previewNombre{
    font-family:'adineue-black';
    font-size:65px;
    margin:10px 0 12px 0;
    line-height:1.1;
    max-width:100%;
    width:100%;
    color:#000;
    word-wrap:break-word;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
}

#previewDescripcion{
    font-family:'adineue-light';
    font-size:19px;
    line-height:1.4;
    margin:8px 0;
    text-align:justify;
    max-width:100%;
    word-wrap:break-word;
    color:#333;
    flex:1;
    overflow:hidden;
    white-space:pre-wrap;
}

.fecha{
    font-family:'adineue-light';
    margin-top:8px;
    text-align:right;
    font-size:16px;
    color:#333;
    line-height:1;
}

/* INFERIOR */
.inferior{
    height:auto;
    min-height:199px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:visible;
}

.lazo{
    width:45px;
    display:block;
    margin:25px auto 35px auto;
}

#firmasPreview{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:50px;
    width:100%;
    overflow:visible;
    row-gap:20px;
}

.firma{
    width:220px;
    text-align:center;
    margin:0;
    padding:8px;
    border:1px solid transparent;
    position:relative;
}

.firma .nombre{
    font-family:'adineue-light';
    font-size:16px;
    color:#333;
    font-weight:600;
    line-height:1;
}

.firma .cargo{
    margin-top:3px;
    font-family:'adineue-pro','adineue','adineue-light';
    font-size:13px;
    color:#333;
    line-height:1;
    font-weight:normal;
}

.firma .btn-eliminar{
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    background:#ff4444;
    color:white;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0;
    z-index:10;
}

.firma:hover .btn-eliminar{
    display:flex;
}