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

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

html,
body {
    font-family: 'Roboto', sans-serif !important;
    min-height: 100vh !important;
    font-weight: 300 !important;
    color: var(--body-text-color)
}

h1{
    font-family: 'Roboto', sans-serif !important;
    /* font-weight: 600 !important;*/
    text-transform: uppercase; 
    color: var(--H-text-color)
} 

h2,h3,h4,h5 {
    font-family: 'Roboto', sans-serif !important;
    color: var(--H-text-color)
} 


.contenedor-layout {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#logo {
    background-image: url(../img/iconos_layout/logo.png);
    height: 60px;
    width: 240px;
    background-size: cover;
    border-radius: 10px;
}

/* probando los colores con dark and light con variables */
 :root {
    --body-text-color: #64748B;
    --H-text-color: #020817;

    --accent-block-background: #F1F5F9;

    --accent-block-background-two: #FAFAFA;

    --accent-block-background-three: #F2FFE7;

    --accent-block-background-four: #FFF;
     
    --accent-icon-background: #F5F5F5;
    --accent-icon-color: #1F43AE;
 }
 .dark-side {
    --body-text-color: #FFFFFF;
    --H-text-color: #ececec;

    --accent-block-background: #27282e;
    --accent-block-color: #FFFFFF;

    --accent-block-background-two: #000000;

    --accent-block-background-three: #27282e;

    --accent-block-background-four: #27282e;
    
    --accent-icon-background: #1F43AE;
    --accent-icon-color: #FFF;
   
 }

 /* utilizado en el home-inicio */
.accent-block {
    background-color: var(--accent-block-background);
    color: var(--accent-block-color);
}
 /* utilizado form de pacientes veterinaria */
.accent-block-two {
    background-color: var(--accent-block-background-two);
    color: var(--accent-block-color-two)
}
 /* utilizado form de localstorage ideas */
.accent-block-three {
    background-color: var(--accent-block-background-three);
    color: var(--accent-block-color-three)
}
 /* utilizado form de CRM */
.accent-block-four {
    background-color: var(--accent-block-background-four);
    color: var(--accent-block-color-four)
}
/* utilizado en el home-inicio */
.accent-icon {
    background-color: var(--accent-icon-background);
    color: var(--accent-icon-color);
}






/* CSS restaurante abajo*/
#logo-rest {
    background-image: url(../img/iconos_restaurante/logo-rest.png);
    height: 69px;
    width: 200px;
    background-size: cover;
    border-radius: 10px;
}

#banner {
    background-image: url(../img/iconos_restaurante/banner.webp);
    height: 550px;
    background-size: cover;
    border-radius: 10px 10px 0px 0px;
}

.submenu {
    position: relative;
}

.submenu #carrito {
    display: none;
}

.submenu:hover #carrito {
    display: block;
    position: absolute;
    right: 0;
    background-color: #fbf6e7;
    color: #000;
    top: 100%;
    z-index: 1;
    padding: 10px;
    min-height: 400px;
    min-width: 350px;
    border-radius: 10px;
}

.button-rest {
    cursor: pointer;
    position: relative;
    padding: 10px;
    font-size: 15px;
    color: rgb(193, 163, 98);
    border: 1px solid rgb(193, 163, 98);
    border-radius: 10px;
    background-color: transparent;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    overflow: hidden;
}

.button-rest::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    background-color: rgb(193, 163, 98);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-rest:hover::before {
    scale: 3;
}

.button-rest:hover {
    color: #212121;
    scale: 1.1;
    box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}

.button-rest:active {
    scale: 1;
}

/* CSS gasto semanal*/
.contenido {
    padding: 20px;
}

.contenido-principal {
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    border: 0.5px solid #cacaca;
}

.presupuesto p {
    margin-bottom: 0;
    font-weight: bold;
}

.presupuesto p span {
    font-weight: normal;
}

#gastos {
    margin-bottom: 30px;
}

/* indexdb */
.navview-content {
    padding-top: 52px;
}





/* layout general */
container {
    width: 100%;
}

@media (min-width: 360px) and (max-width: 576px) {
    .container {
        max-width: 98%;
    }
    .text{
        font-weight: 300 !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .container {
        max-width: 95%;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 1201px) {
    .container {
        max-width: 90%;
    }
}