:root {
	--bg-color: white;
	--bg-hl-color: lightgray;
	--fg-color: gray;
	--hl-color: lightskyblue;
	--error-color: red;
	--error-hl-color: orange;

	
	--big-padding: 30px;
	--default-padding: 15px;
	--small-padding: 10px;
	--smallest-padding: 5px;
	
	--radius: 20px;
	--shadow: 5px;
	--shadow-color: var(--fg-color);
	--transition: 0.3s;
}
* {
	background-color: var(--bg-color);
	color: var(--fg-color);
}
html {
	height:100%;
}
body {
	margin: 0;
	padding: 0;
}
label {
	font-weight: bold;
}
td {
	text-align: center;
}
th {
	font-weight: normal;
}

a:hover {
	color: var(--hl-color);
}

.popup-background {
	background-color: black;
	opacity: 25%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup {
	padding: var(--big-padding);
	
	border: 2px var(--bg-hl-color) solid;
	border-radius: var(--radius);
	box-shadow: 0 0 var(--shadow) var(--bg-color);
	
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	max-height: 80%;
	max-width: 80%;
	overflow: auto;
}

.items-column {
	display: flex;
	flex-direction: column;
	gap: var(--default-padding);
}
.items-grid {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	grid-auto-flow: column;
	gap: var(--default-padding);
}
.items-side {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--default-padding);
}

.container {
	padding: var(--default-padding);
	border-radius: var(--radius);
	border: solid var(--fg-color) 1;
	box-shadow: 0 0 var(--shadow) var(--fg-color);
}

.messages {
  padding: var(--default-padding);
  border-radius: var(--radius);
  border: solid var(--hl-color) 1;
  
  display: flex;
  align-items:center;
  gap: 5px;
}
.error {
  color:var(--error-color);
  font-size: 1.2em;
  font-weight: bold;
}
.info {
  color:var(--hl-color);
  font-size: 1.2em;
  font-weight: bold;
}
.small-img {
  height: 50px;
}

.main {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.body {
	flex-grow: 1;
	overflow-y: scroll;
	padding: var(--big-padding);
	
	display: flex;
	flex-direction: column;
	gap: var(--default-padding);
}

.separator {
	flex-basis: 1px;
	flex-shrink: 0;
	background-color: var(--fg-color);
}

.bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	padding: var(--default-padding);
	box-shadow: 0px var(--shadow) 3px -3px var(--fg-color);
	color: white;
	gap: var(--default-padding);
	z-index: 1;
}
.bar-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5em;
	font-weight: bold;
}
@media (max-width: 1000px) {
	.bar-title {
		margin-left: auto;
		margin-right: auto;
		position: static;
		transform: none;
	}
}
.bar-option {
	font-size: 1.2em;
	transition: var(--transition);
	cursor: pointer;
	text-decoration: none;
}
.bar-option:hover {
	color: var(--hl-color);
}

.table {
	/* table-layout: fixed; */
	border-collapse: collapse;
	border-spacing: 0;
	padding:0;
	min-width: 100%;
}
.table, tr, th, td {
	border: 1px gray solid;
}
.table thead th {
	background-color: var(--fg-color);
	color: var(--bg-color);
	font-size: 1.2em;
	padding: var(--small-padding);
	top: 0px;
}
.table tbody th, .table tbody td {
	padding: var(--smallest-padding);
}
.table-container {
	overflow-x:scroll; 
	align-self:stretch;
	flex-shrink: 0;
}

input[type=text], input[type=password], input[type=email] {
	all: unset;
	padding: var(--smallest-padding);
	border-radius: var(--radius);
	border-style: solid;
	border-width: 1px;
	border-color: var(--fg-color);
	transition: var(--transition);
}
input[type=text]:focus, input[type=password]:focus {
	border-color: var(--hl-color);
}
input[type=text]:invalid, input[type=password]:invalid {
	border-color: var(--error-color);
	color: var(--error-color);
}
tr.no-confirmado input[type=text]:invalid, input[type=password]:invalid {
	border-color: black;
	color: black;
}

button { all: unset; }
.button {
	border-top: 1px var(--bg-hl-color) solid;
	border-radius: var(--radius);
	padding: var(--default-padding);
	box-shadow: 0px 3px var(--shadow) var(--shadow-color);
	font-weight: bold;
	cursor: pointer;
	transition: var(--transition);
}
.button:hover {
	background-color: var(--hl-color);
	color: var(--bg-color);
}
.button:active {
	background-color: var(--hl-color);
	color: var(--bg-color);
	transform: translateY(3px);
	box-shadow: 0 3px calc(var(--shadow) - 3px) var(--shadow-color);
}

.tabs { 
	display:flex;
	box-shadow: 0 0 var(--shadow) var(--shadow-color);
	border-radius: var(--radius);
}
.tabs > .tab:nth-child(1) { 
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
	border-left: 1px var(--fg-color) solid;
}
.tabs > .tab:last-child { 
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	border-right: 1px var(--fg-color) solid;
}

.tab {
	padding: var(--default-padding);
	cursor: pointer;
	border-top: 1px var(--fg-color) solid;
	border-bottom: 1px var(--fg-color) solid;
	border-left: 1px var(--bg-hl-color) solid;
	transition: var(--transition);
}
.tab:hover {
	background-color: var(--hl-color);
	color: var(--bg-color);
	text-decoration: underline;
}

.selected {
	background-color: var(--hl-color);
	color: var(--bg-color);
}
.small-pad { padding: var(--small-padding); }
.smallest-pad { padding: var(--smallest-padding); }
.spaced { display:flex; justify-content:space-between; align-items:center; }
#time-select { display: flex; flex-direction: column; gap: var(--small-padding); }

.feriado-label {
	color: tomato;
}
.feriado {
	--bg-color: tomato;
	--fg-color: white;
	--hl-color: white;
}
.emergente {
	--bg-color: lightgreen;
	--hl-color: white;
}
.franquiciado {
	--bg-color: gold;
	--fg-color: white;
	--hl-color: white;
}
.no-confirmado {
	--bg-color: red;
	--fg-color: white;
	--hl-color: white;
}
.opticallery {
	--bg-color: lightgray;
	--fg-color: white;
	--hl-color: white;
}

.day-cell {
	width: 100%;
	height: 100%;
}
.day-cell-content {
	padding: var(--small-padding);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--default-padding);
	overflow: auto;
}
.day-label {
	font-size: 1.2em;
	transition: var(--transition);
	font-weight:bold;
	align-self: start;
}
.day-operativo {
	border-radius: var(--radius);
	padding: var(--small-padding);
	box-shadow: 0 0 var(--shadow) var(--shadow-color);
}

.text-button {
	--size: 1.1em;
	font-family: 'Times New Roman', serif;
	text-decoration: none;
	font-weight: bold;
	border-radius: 50%;
	font-size: var(--size);
	width: var(--size);
	height: var(--size);
}

.hcenter {
	display: flex;
	align-items: center;
	justify-content: center;
}