:root{--azul:#3b82f6;--blanco:#fff;--gris-claro:#f5f5f5;--gris:#94a3b8;--gris-oscuro:#64748b;--negro:#000}body{background-color:var(--gris-claro);font-family:Lato,sans-serif;font-size:1.6rem}html{box-sizing:border-box;font-size:62.5%}*,:before,:after{box-sizing:inherit}.fijar{height:100vh;overflow:hidden}h1{font-size:4rem}h2{font-size:3rem}.sombra{background-color:var(--blanco);border-radius:1.2rem;padding:4rem;box-shadow:0 9px 10px -10px #00000082}header{background-color:var(--azul)}header h1{color:var(--blanco);text-align:center;text-transform:uppercase;margin:0;padding:3rem 0}.formulario{width:95%;margin:0 auto;padding:10rem 0}@media (min-width:768px){.formulario{width:60rem;padding:5rem 0}}.formulario legend{text-align:center;text-transform:uppercase;color:var(--blanco);border-bottom:2px solid var(--azul);margin-bottom:4rem;padding-bottom:1rem;font-size:3.6rem;display:block}.formulario .campo{margin-bottom:2rem;display:grid}.formulario label{color:var(--azul);text-align:center;margin-bottom:2rem;font-size:2.8rem}.formulario input[type=text],.formulario input[type=number]{background-color:var(--gris-claro);border:none;border-radius:1rem;flex:1;padding:1rem;font-size:1.6rem}.formulario input[type=submit]{text-align:center;color:var(--blanco);text-transform:uppercase;background-color:#1048a4;border:none;width:100%;margin-top:2rem;padding:1rem;font-size:1.9rem;font-weight:900;transition:background-color .3s}@media (min-width:768px){.formulario input[type=submit]{padding:1rem 5rem;display:block}}.formulario input[type=submit]:hover{cursor:pointer;background-color:#042a67}.formulario select{text-align:center;background-color:var(--gris-claro);border:none;border-radius:1rem;flex:1;padding:1rem}.alerta{text-transform:uppercase;text-align:center;max-width:60rem;margin:2rem auto;padding:2rem 5rem;font-size:1.8rem;font-weight:900}.alerta.error{background-color:var(--blanco);color:#b91c1c;border-left:5px solid #b91c1c}.alerta.success{background-color:var(--blanco);color:#07cb15;border-left:5px solid #07cb15}.contenedor{width:90%;max-width:80rem;margin:0 auto}.contenedor-presupuesto{justify-content:space-between;align-items:center;margin-top:-5rem;display:flex;transform:translateY(5rem)}.dos-columnas{flex-direction:column}.dos-columnas :first-child{margin-bottom:4rem}@media (min-width:768px){.dos-columnas{flex-direction:row;align-items:center;gap:4rem}.dos-columnas>div{width:50%}.dos-columnas :first-child{margin-bottom:0}}.formulario input[type=text].nuevo-presupuesto,.formulario input[type=number].nuevo-presupuesto{text-align:center;font-size:2.8rem}.contenedor-presupuesto svg{width:25rem}.contenido-presupuesto{width:100%}.contenido-presupuesto p{color:var(--gris-oscuro);text-align:center;font-size:2.4rem;font-weight:400}@media (min-width:768px){.contenido-presupuesto p{text-align:left}}.contenido-presupuesto p.negativo,.contenido-presupuesto p.negativo span{color:#dc2626}.contenido-presupuesto span{color:var(--azul);font-weight:900}.reset-app{text-align:center;width:100%;color:var(--blanco);text-transform:uppercase;background-color:#07cb15;border:none;border-radius:1rem;padding:1rem;font-weight:900;transition-property:background-color;transition-duration:.3s}.reset-app:hover{cursor:pointer;background-color:#c71465}main{padding-top:10rem}.filtros .campo{align-items:center;gap:2rem;display:flex}.filtros label{color:var(--gris-oscuro);font-size:3rem;font-weight:900}.filtros select{text-align:center;background-color:var(--gris-claro);border:none;border-radius:1rem;flex:1;padding:1rem}.listado-gastos{margin-top:5rem}.listado-gastos h2{color:var(--gris-oscuro);font-weight:900}.no-gastos{text-align:center;font-size:2.2rem}.gasto{justify-content:space-between;align-items:center;gap:2rem;width:100%;margin-bottom:2rem;display:flex}.cantidad-gasto{color:var(--negro);font-size:2.4rem;font-weight:900}.contenido-gasto{align-items:center;gap:2rem;display:flex}.contenido-gasto img{width:10rem}.descripcion-gasto p{margin:0 0 .3rem}.descripcion-gasto .categoria{color:var(--gris);text-transform:uppercase;font-size:1.6rem;font-weight:900}.descripcion-gasto p{margin-bottom:1rem}.descripcion-gasto .nombre-gasto{color:var(--gris-oscuro);font-size:2.4rem;font-weight:700}.descripcion-gasto .nombre-gasto:hover{cursor:pointer}.descripcion-gasto .fecha-gasto{color:var(--gris-oscuro);font-size:1.8rem;font-weight:900}.descripcion-gasto .fecha-gasto span{font-weight:400}.nuevo-gasto{position:fixed;bottom:5rem;right:5rem}.nuevo-gasto img{width:5rem}.nuevo-gasto img:hover{cursor:pointer}.modal{background-color:#000000eb;position:absolute;inset:0}.modal .cerrar-modal{width:3rem;height:3rem;position:absolute;top:3rem;right:3rem}.modal .cerrar-modal img{width:100%}.modal .formulario{opacity:0;width:40rem;max-width:80rem;transition-property:all;transition-duration:.3s;transition-timing-function:ease-in}.modal label{color:var(--blanco)}body .modal{overflow:hidden}.modal .formulario.animar{opacity:1;position:relative}.modal .formulario.cerrar{opacity:0}.modal label{text-align:left}.CircularProgressbar .CircularProgressbar-text{font-size:1rem!important}.swipe-action__leading{background-color:var(--azul);color:var(--blanco);margin-bottom:2rem}.swipe-action__trailing{color:var(--blanco);background-color:#db2777;margin-bottom:2rem}.swipeable-list .swipe-action{text-align:right;justify-content:center;align-items:center;font-size:2.4rem;display:flex}@media (max-width:468px){.formulario input[type=text].nuevo-presupuesto,.formulario input[type=number].nuevo-presupuesto{text-align:center;font-size:1.3rem}}
