/************* ************* General ************* *************/
* {
    box-sizing: border-box;
    padding: 0; margin: 0;
    font-family: sans-serif;
}

:root {
    --clr-f-main: linear-gradient(to bottom, rgb(50, 50, 50), rgb(20, 20, 20));

    --clr-text-title: rgb(200, 200, 200);
    --clr-text-tem: rgb(170, 170, 170);
    --clr-text-fo: rgb(50, 50, 50);
    --clr-text: rgb(180, 180, 180);

    --clr-f-scrollbar: linear-gradient(to bottom, rgba(100, 100, 200), rgba(50, 50, 150));

    --clr-scrollbar: rgba(146, 146, 247, .7);
    --clr-h-scrollbar: rgb(146, 146, 247);

    --clr-f-header: linear-gradient(to left, rgba(100, 100, 200), rgba(50, 50, 150));
    --clr-border-articles: rgb(180, 180, 255);

    --clr-border-summary_: rgb(100, 100, 100);
    --clr-f-footer: linear-gradient(to right, rgba(100, 100, 200), rgba(50, 50, 150));
}

body {
    min-height: 100vh;
    background: var(--clr-f-main);
    color: var(--clr-text);
}

::-webkit-scrollbar { width: 12px; }

::-webkit-scrollbar-thumb {
    background: var(--clr-scrollbar);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-h-scrollbar);
}

::-webkit-scrollbar-track {
    background: var(--clr-f-scrollbar);
}

/************* ************* Header ************* *************/

.header {
    user-select: none;
    background: var(--clr-f-header);
}
   
.h__title {
    padding: 15px; font-size: 2rem;
    text-align: center;
    color: var(--clr-text-title);
}

/************* ************* Main ************* *************/
.main { 
    padding: 10px; min-height: calc(100vh - 94.67px - 66.8px); 
} 

.articles {
    width: 90%; 
    margin: 20px auto;
    padding: 20px;

    border-radius: 30px;
    border: 2px solid var(--clr-border-articles);
}

.summary {
    font-size: 1.8rem; text-align: center;
}

.section { 
    margin: 10px 0px; padding: 10px 5px; 
    border-radius: 15px;
    
    display: grid; gap: 10px;
}

/** Otros ************************* */
.text { margin: 30px 0px; }

.subtitle { 
    font-size: 1.4rem; margin-top: 15px; 
    color: var(--clr-text-title);
    cursor: auto;
}

.text, .li { font-size: 1.2rem; color: var(--clr-text); }

.txt_author { text-align: center; }

.center { margin-left: calc(50% - 75px); }

.ul, .ol {
    margin: 5px; margin-left: 20px;
    display: grid; gap: 10px;
}

.li b { font-weight: bold; font-size: 1.2rem; }

/** Temario ************************* */
.details_ {
    margin: 20px 10px; padding: 10px;
    cursor: pointer;

    border-radius: 10px; color: var(--clr-text-title);
    border: 2px solid var(--clr-border-articles);
}

.details_[open] > .summary_ {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--clr-border-summary_);
}
.summary_ {
    font-size: 1.2rem;
}

.opc-main {
    margin: 5px; margin-left: 20px; 
    cursor: pointer;
    font-size: 1.2rem; color: var(--clr-text-tem);
}

.opc-main:hover { 
    padding: 5px; border-radius: 10px;
    background: rgba(80, 80, 80); 
}

.opc-main:active { padding-left: 10px; }

/** Btn File ************************* */

.btn-file { display: none; }
.lbl_file { display: flex; width: min-content; }

.file__info, .file__open {
    font-size: 1.2rem; padding: 5px 10px;
    cursor: pointer; user-select: none;
}

.file__info {
    border: 1px solid var(--clr-border-articles);
    border-radius: 10px 0px 0px 10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file__open {
    background: var(--clr-border-articles);
    color: var(--clr-text-fo);
    border: 1px solid var(--clr-border-articles);
    border-radius: 0px 10px 10px 0px;
}

/************* ************* Footer ************* *************/

.footer {
    user-select: none; padding: 10px;
    background: var(--clr-f-footer);
}

.author, .version { 
    color: var(--clr-text); text-align: center; 
}

.author {
    margin: 10px; font-size: 1.5rem;
}

.version {
    margin: 5px; font-size: 1.2rem;
}

/** Author: FraVelz */