/* ===== Fuentes ===== */
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");

/* ===== Variables ===== */
:root {
	/* Color primario */
	--clr-primary-1: hsl(172, 67%, 45%);

	/* Colores secundarios */
	--clr-very-dark-cyan: hsl(183, 100%, 15%);
	--clr-dark-grayish-cyan: hsl(186, 14%, 43%);
	--clr-dark-grayish-cyan-2: hsl(184, 14%, 56%);
	--clr-light-grayish-cyan: hsl(185, 41%, 84%);
	--clr-light-grayish-cyan-2: hsl(189, 41%, 97%);
	--clr-white: hsl(0, 0%, 100%);

	/* Tipografia */
	--ff-primary: "Space Mono", monospace;
	--fs-primary: 24px;

	/* Algunas configuraciones */
	--max-width: 1440px;
	--min-widht: 375px;
	--fixed-width: 620px;
	--border-radius: 25px;
}

/* ==================================================== */
/* ================= Estilos globales ================= */
/* ==================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--ff-primary);
	background: var(--clr-light-grayish-cyan);
	font-size: var(--fs-primary);
}

header {
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 40px;
	width: 100%;
	min-width: var(--min-widht);
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0px auto 50px;
	width: var(--min-widht);
	background: var(--clr-white);
	border-radius: var(--border-radius);
}

/* Elimina decoradores de los inputs tipo numero */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}

/* ==================================================== */
/* ================= Section entradas ================= */
/* ==================================================== */

.section-entradas {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 330px;
	height: 450px;
	margin: 10px;
	overflow: hidden;
}

/* FACTURA */
.factura-total {
	margin: 24px 10px 15px 10px;
}

.factura-total h3 {
	font-size: 16px;
	color: var(--clr-dark-grayish-cyan);
	margin-bottom: 5px;
}

.input-factura-total {
	background-color: var(--clr-light-grayish-cyan-2);
	background-image: url(../../images/icon-dollar.svg);
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-right: 10px;
	border-radius: 5px;
	color: var(--clr-very-dark-cyan);
	font-family: var(--ff-primary);
	font-size: 24px;
	font-weight: bold;
	text-align: right;
	width: 100%;
	height: 48px;
	border: none;
}

.input-factura-total:focus {
	outline: none;
	border: 2px solid var(--clr-primary-1);
}

::placeholder {
	color: var(--clr-dark-grayish-cyan-2);
}

/* BOTONES DE PORCENTAJES */
.porcentajes-propina {
	margin: 15px 10px 15px 10px;
}

.porcentajes-propina h3 {
	font-size: 16px;
	color: var(--clr-dark-grayish-cyan);
	margin-bottom: 5px;
}

.porcentajes-propina-btns {
	display: grid;
	height: 176px;
	grid-gap: 18px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr 1fr 1fr;
}

.btn {
	border: none;
	border-radius: 5px;
	background-color: var(--clr-very-dark-cyan);
	font-family: var(--ff-primary);
	font-size: var(--fs-primary);
	font-weight: bold;
	color: var(--clr-white);
	cursor: pointer;
}

.btn:hover {
	background-color: var(--clr-primary-1);
	color: var(--clr-very-dark-cyan);
}

.btn-focus {
	background-color: var(--clr-primary-1);
	color: var(--clr-very-dark-cyan);
}

.input-porcentajes-propina {
	background-color: var(--clr-light-grayish-cyan-2);
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	color: var(--clr-very-dark-cyan);
	font-family: var(--ff-primary);
	font-size: 28px;
	font-weight: bold;
	text-align: right;
	width: 100%;
	height: 47px;
	border: none;
}

.input-porcentajes-propina::placeholder {
	font-size: 22px;
	text-align: right;
	margin-right: 6px;
}

.input-porcentajes-propina:focus {
	outline: none;
	border: 2px solid var(--clr-primary-1);
}

/* NUMERO DE PERSONAS */
.numero-personas {
	margin: 15px 10px 20px 10px;
}

.numero-personas__title {
	display: flex;
	justify-content: space-between;
}

.numero-personas__title h3 {
	font-size: 16px;
	color: var(--clr-dark-grayish-cyan);
	margin-bottom: 5px;
}

.numero-personas__title h4 {
	font-size: 16px;
	margin-bottom: 5px;
}

.show-title {
	color: orange;
}

.no-mostrar {
	visibility: hidden;
}

.input-numero-personas {
	background-color: var(--clr-light-grayish-cyan-2);
	background-image: url(../../images/icon-person.svg);
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-right: 10px;
	border-radius: 5px;
	color: var(--clr-very-dark-cyan);
	font-family: var(--ff-primary);
	font-size: 24px;
	font-weight: bold;
	text-align: right;
	width: 100%;
	height: 48px;
	border: none;
}

.input-numero-personas:focus {
	outline: none;
	border: 2px solid orange;
}

/* ==================================================== */
/* ================= Section salidas ================= */
/* ==================================================== */
.section-salidas {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background: var(--clr-very-dark-cyan);
	width: 330px;
	height: 260px;
	border-radius: 20px;
	margin: 15px 10px 30px 10px;
	overflow: hidden;
	padding: 30px 10px 15px 10px;
}

.propina-persona {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 286px;
	height: 50px;
	align-self: center;
}

.propina-persona h3 {
	font-family: var(--ff-primary);
	color: var(--clr-white);
	font-size: 14px;
}

.propina-persona span {
	color: var(--clr-dark-grayish-cyan);
}

.propina-persona h4 {
	color: var(--clr-primary-1);
	font-size: 30px;
}

.propina-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 286px;
	height: 50px;
	align-self: center;
}

.propina-total h3 {
	color: var(--clr-white);
	font-size: 14px;
}

.propina-total span {
	color: var(--clr-dark-grayish-cyan);
}

.propina-total h4 {
	color: var(--clr-primary-1);
	font-size: 30px;
}

.reset {
	width: 286px;
	height: 50px;
	border: none;
	align-self: center;
}

.btn-reset {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 5px;
	font-family: var(--fs-primary);
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--clr-very-dark-cyan);
	background-color: rgb(13, 104, 109);
	cursor: pointer;
}

.btn-reset:hover {
	background-color: var(--clr-primary-1);
}

/* ================================================ */
/* ==================== Footer ==================== */
/* ================================================ */
footer {
	padding-bottom: 15px;
}

.attribution {
	text-align: center;
	font-size: 11px;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}