/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ */
/* ┃ CANToNES DATABASE FE         ┃ */
/* ┃ Ariadna Cisneros Castro 2025 ┃ */
/* ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ */
/* ┃ Estilo del sitio             ┃ */
/* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */


/* ┏━━━━━━━━┓ */
/* ┃ PALETA ┃ */
/* ┗━━━━━━━━┛ */

:root{

/* https://coolors.co/1a1423-372549-774c60-b75d69-eacdc2 */

    --raisin-black:         #1a1423;
    --dark-purple:          #372549;
    --english-violet:       #52376d;
    --ultra-violet:         #664488;
    --eggplant:             #774c60;
    --redwood:              #b75d69;
    --pale-dogwood:         #eacdc2;
    --champagne-pink:       #ecd8d1;
    --misty-rose:           #F3E0DA;
    --seashell:             #f5e6e1;

/* https://coolors.co/1a1423-372549-52376d-664488-774c60-b75d69-ffd2c2-ffe1d6-ffebe3-fff4f0 */

    --almond-silk: #ffd2c2ff;
    --soft-blush: #ffe1d6ff;
    --soft-blush-ii: #ffebe3ff;
    --seashell: #fff4f0ff;

    --panel-fondo:          var(--dark-purple);
    --panel-flotar:         var(--ultra-violet);
    --panel-selec:          var(--english-violet);

    --panel-texto:          var(--soft-blush-ii);
    --pagina-fondo:         var(--seashell);
    /*--panel-texto:          var(--champagne-pink);
    --pagina-fondo:         var(--seashell);*/
}


/* ┏━━━━━━━━━━━━━┓ */
/* ┃ TIPOGRAFÍAS ┃ */
/* ┗━━━━━━━━━━━━━┛ */

@font-face {
    font-family: BellMT;
    src: url('fuentes/bell-mt.ttf');
}


/* ┏━━━━━━━━━━━┓ */
/* ┃ ELEMENTOS ┃ */
/* ┗━━━━━━━━━━━┛ */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    display: flex;
    font-size: 100%;
    overflow: hidden;
}

/* Propagar box-sizing */
*, *::before, *::after {
  box-sizing: inherit;
}

h1, h2, h3, h4, label, p, div, table, input, textarea, select, button {
    font-family: sans-serif;
}

label, p, table, input, textarea, select, button {
    font-size: 1em;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ┏━━━━━━━━┓ */
/* ┃ CLASES ┃ */
/* ┗━━━━━━━━┛ */

.boton_panel {
    display: block;
}

.contenido_columna_principal {
    text-align: justify;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    min-height: 0;
    overflow: auto;
}

.pagina_sitio {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 0;
}


/* ┏━━━━━━━━━━━━━━━━━┓*/
/* ┃ IDENTIFICADORES ┃*/
/* ┗━━━━━━━━━━━━━━━━━┛*/

#columna_panel {
    width: 12%;
    height: 100%;
    min-height: 100vh;
    background-color: var(--panel-fondo);
}

#columna_principal {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: var(--pagina-fondo);
    width: 100%;
    height: 100vh;
    min-height: 0;
}

#panel_lateral_iframe {
    width: 100%;
    height: 100vh;
}

#panel_lateral {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    color: var(--panel-texto);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#panel_lateral button {
    padding: 10px;
    border: none;
    outline: none;
    background-color: var(--panel-fondo);
    color: var(--panel-texto);
    font-size: 100%;
    text-align: left;
    padding-left: 20%;
    cursor: pointer;
}

#panel_lateral button.activo {
    background-color: var(--panel-selec);
}

#panel_lateral button:hover {
    background-color: var(--panel-flotar);
}