/****************************************************************************************/
/***                                   LAYOUT Y ESTILOS                               ***/
/****************************************************************************************/
* {
	box-sizing: border-box;
	margin: 0px; padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body {
	display: flex;
	flex-flow: column nowrap;
	width: 100vw; height: 100vh;
	height: 100dvh;
	justify-items: justify;
	background-color: var(--BC1);
}
/****************************************************************************************/
#Head {
	display: flex;
	padding: 4px;
	align-items: center;
	justify-content: space-around;
	color: var(--BC1);
	background-color: var(--FC1);
}
#Head > img {max-height: 50px;}
#Head  select {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: var(--blanco);
	background-color: var(--FC1);
	outline: none; border: none;
}
/****************************************************************************************/
#SubHead {
	display: flex;
	width: 100%;
	padding: 4px; gap: 4px;
	overflow-x: auto;
}
#SubHead > div {
	display: flex;
	min-width: 80px; max-width: 80px;
	min-height: 80px; max-height: 80px;
	padding: 2px; gap: 3px;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	background-color: var(--BC1);
	border: 1px solid var(--FC1);
	border-radius: 8px;
	cursor: pointer;
}
#SubHead > div.selected {background-color: var(--SEL);}
#SubHead > div > img {
	max-width: 80%;
	max-height: 80%;
}
#SubHead > div > div {
	font-size: 9px;
	font-weight: bold;
	color: var(--FC1);
}
/****************************************************************************************/
#Main {
	display: flex;
	flex: 1; width: 100%;
	padding: 0px 4px 4px 4px;
	flex-flow: column nowrap;
	justify-content: center;
	overflow-y: hidden;
}
/****************************************************************************************/
#Navigation {
	display: flex;
	width: 100%; height: 30px;
	justify-content: flex-start;
}
#Navigation > div:nth-child(odd) {
	display: flex;
	padding: 0px 10px;
	justify-content: center;
	align-items: center;
	color:  var(--BC1);
	font-size: 12px;
	border-left: 1px solid var(--FC1);
	border-top: 1px solid var(--FC1);
	border-right: 1px solid var(--FC1);
	border-radius: 6px 6px 0px 0px;
	background-color: var(--FC1);
	cursor: pointer;
}
#Navigation > div:nth-child(even) {width: 4px; border-bottom: 1px solid var(--FC1);}
#Navigation > div:nth-last-child(1) {flex: 1; border-bottom: 1px solid var(--FC1);}
#Navigation > div.selected {color: var(--FC1); background-color: var(--BC1);}
/****************************************************************************************/
#Content {
	display: flex;
	flex: 1;
	padding: 4px; gap: 4px;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	border-left: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
	border-right: 1px solid var(--FC1);
	overflow-y: auto;
}
#Content::after {
  content: "-";
  font-size: 25px;
  color:  var(--BC1);
  background-color: var(--BC1);
}
/****************************************************************************************/
#Podio {
	display: flex;
	position: relative;
	max-width: 100%; max-height: 100%;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
#Podio img {max-width: 100%;}
#Podio div.Titulo {
  position: absolute; top: 5%;
  font-size: min(6vmin,36px);
  font-weight: bold;
  letter-spacing: 0.6px;
  color: var(--BC2);
  text-shadow: -1px 0 var(--FC1), 0 1px var(--FC1), 1px 0 var(--FC1), 0 -1px var(--FC1);
}
#Podio div.Texto {
	width: 100%;
	font-size: min(5vmin, 28px);
	font-style: italic;
	text-align: center;
	color: var(--BC1);
	background-color: var(--FC1);
}
#P1 {
  position: absolute;
  top: -18%; transition: top 2s;
  width: 18%;
}
#P2 {
  position: absolute;
  top: -15%; transition: top 2s;
  left: 22%; width: 15%;
}
#P3 {
  position: absolute;
  top: -15%; transition: top 2s;
  right: 22%; width: 15%;
}
#Colistas {
	position: absolute;
  bottom: 0.5%; width: 100%;
  display: flex; flex-flow: row nowrap;
  justify-content: center;
  opacity: 0%; transition: opacity 1.5s;
  font-size: min(16px, 2.5vh);
  color: pink;
}
#Colistas > div {
	display: flex; flex-flow: column nowrap;
  align-items: center;
  width: 13%; margin: 0px 10px;
}
#Colistas > div > img {width: 100%;}
#MVP {
	display: flex;
	flex-flow: row nowrap;
	gap: 40px;
	justify-content: center;
	align-items: center;
	position: absolute;
	color: var(--BC2);
	font-size: min(2.5vmin,15px); font-weight: bold;
	top: min(13vmin,75px);
	opacity: 0%; transition: opacity 0.8s;
}
#MVP > div {
	display: flex;
	flex-flow: column nowrap;
	gap: 3px;
	justify-content: center;
	align-items: center;
}
#MVP div.Player {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 10px; gap: 5px;
	color: var(--BC2);
	font-size: min(2.8vmin,12px); font-weight: normal;
	background-color: #F0FAF0;
	border: 1px solid var(--BC2);
	border-radius: 6px
}
#MVP img {
	width: min(3.5vmin,20px);
}

#Confetti {
  position: absolute;
  width: 100%; height: 100%;
  opacity: 0%; transition: opacity 0.8s;
}
/****************************************************************************************/
table {max-width:100%; border: 1px solid var(--verde); border-collapse: collapse;}
/****************************************************************************************/
table.Stats {width:100%; border: 1px solid var(--FC1);margin-bottom: 10px;}
table.Stats:nth-last-child(1) {margin-bottom: 0px;}
table.Stats img {max-width: 20px;}
table.Stats td {
	min-width: 24px;
	font-size: 12px;
	text-align: center;
}
table.Stats th {
	padding: 3px 0px;
	font-size: 16px;
	font-weight: bold;
	color: white;
	background-color: var(--FC1);
}
table.Stats tr:nth-child(even) {background-color: var(--AUX);}
table.Stats tr.SubHead > td {
	padding: 2px 3px;
	font-size: 14px;
	text-align: center;
	color: white;
	background-color: var(--BC2);
	border-bottom: 1px solid var(--FC1);
}
table.Stats tr.SubHead > td.Main {
	border-left: none;
	border-right: none;
	border-bottom: none;
}
table.Stats tr.Grupo td {
	font-size: 11px;
	text-align: center;
	color: var(--FC3);
	background-color: var(--BC3);
	border-top: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
}
table.Stats td.Main {
	color: var(--FC2);
	background-color: var(--BC2);
	border-left: 1px solid var(--FC1);
	border-right:  1px solid var(--FC1);
}
table.Stats td:nth-child(1) {width: 40px;}
table.Stats td:nth-child(2) {text-align: left;}
table.Stats td:nth-child(n+3) {width: 40px;}
/****************************************************************************************/
table.Roster {width:100%; border: 1px solid var(--FC1);}
table.Roster img {max-width: 20px;}
table.Roster th {
	padding: 3px 0px;
	font-size: 16px;
	font-weight: bold;
	color: var(--BC1);
	background-color: var(--FC1);
}
table.Roster tr:nth-child(even) {background-color: var(--AUX);}
table.Roster td {
	max-width: 20px;
	padding: 2px 4px;
	font-size: 12px;
	text-align: center;
	color: var(--FC1);
}
table.Roster tr.Seccion > td {
	font-size: 14px;
	text-align: center;
	color: var(--FC1);
	background-color: var(--ALT);
	border-top: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
}
table.Roster tr.SubHead > td {
	font-size: 12px;
	text-align: center;
	color: var(--BC1);
	background-color: var(--BC2);
	border-top: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
}
table.Gral tr.SubHead > td:nth-child(9) {border: none;}
table.Gral td:nth-child(5) {max-width: none; text-align: left;}
table.Gral td:nth-child(9) {color: var(--FC2); background-color: var(--BC2);border-left: 1px solid var(--FC1);border-right: 1px solid var(--FC1);}
table.Team tr.SubHead > td:nth-child(7) {border: none;}
table.Team td:nth-child(3) {max-width: none; text-align: left;}
table.Team td:nth-child(7) {color: var(--FC2); background-color: var(--BC2);border-left: 1px solid var(--FC1);border-right: 1px solid var(--FC1);}
/****************************************************************************************/
table.Players {width:100%; border: 1px solid var(--FC1);}
table.Players img {max-width: 20px;}
table.Players th {
	padding: 3px 0px;
	font-size: 16px;
	font-weight: bold;
	color: var(--BC1);
	background-color: var(--FC1);
}
table.Players tr:nth-child(even) {background-color: var(--AUX);}
table.Players td {
	padding: 2px 4px;
	font-size: 12px;
	text-align: center;
	color: var(--FC1);
}
table.Players tr.SubHead > td {
	font-size: 12px;
	text-align: center;
	color: white;
	background-color: var(--BC2);
	border-bottom: 1px solid var(--FC1);
}
table.Players tr.SubHead > td:nth-child(7) {border: none;}
table.Players td:nth-child(3) {max-width: 150px; text-align: left;}
table.Players td:nth-child(n+4) {width: 50px;}
table.Players td:nth-child(7) {color: var(--FC2); background-color: var(--BC2);border-left: 1px solid var(--FC1);border-right: 1px solid var(--FC1);}
/****************************************************************************************/
table.Goallies {width:100%; border: 1px solid var(--FC1);}
table.Goallies img {max-width: 20px;}
table.Goallies th {
	padding: 3px 0px;
	font-size: 16px;
	font-weight: bold;
	color: var(--BC1);
	background-color: var(--FC1);
}
table.Goallies tr:nth-child(even) {background-color: var(--AUX);}
table.Goallies td {
	padding: 2px 4px;
	font-size: 12px;
	text-align: center;
	color: var(--FC1);
}
table.Goallies tr.SubHead > td {
	font-size: 14px;
	text-align: center;
	color: white;
	background-color: var(--BC2);
	border-bottom: 1px solid var(--FC1);
}
table.Goallies tr.SubHead > td:nth-child(5) {border: none;}
table.Goallies td:nth-child(2) {text-align: left;}
table.Goallies td:nth-child(n+3) {width: 45px;}
table.Goallies td:nth-child(5) {color: var(--FC2); background-color: var(--BC2);border-left: 1px solid var(--FC1);border-right: 1px solid var(--FC1);}
/****************************************************************************************/
table.Schedule {width:100%; margin-bottom: 10px;}
table.Schedule:nth-last-child(1) {margin-bottom: 0px;}
table.Schedule img {max-width: 20px;}
table.Schedule span {display:block;font-size: 8px;}
table.Schedule tr {
	border-left: 1px solid var(--FC1);
	border-right: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
}
table.Schedule th {
	padding: 3px 0px;
	font-size: 16px;
	font-weight: bold;
	color: var(--BC1);
	background-color: var(--FC1);
}
table.Schedule td {
	min-width: 30px;
 	padding: 2px 4px;
	font-size: 12px;
	text-align: center;
}
table.Schedule td.Zamboni {font-size: 9px; background-color: var(--AUX);}
table.Schedule td.Score {font-size: 16px; font-weight: bold;}
table.Schedule td.Unnecessary {font-size: 8px; color: var(--ALT)}
table.Schedule td.Sancion {color: var(--ALT);}
table.Schedule td.RD {padding: 0px; font-size: 8px; color: gray;}
table.Schedule tr.SubHead > td {
	font-size: 14px;
	text-align: center;
	color: var(--FC2);
	background-color: var(--BC2);
}
table.Schedule td:nth-child(2) {min-width: 112px; text-align: left;}
table.Schedule td:nth-child(4) {min-width: 112px; text-align: right;}
/****************************************************************************************/
table.Actions {margin-bottom: 10px; width: 100%}
table.Actions img {max-width: 20px;}
table.Actions tr {
	border-left: 1px solid var(--FC1);
	border-right: 1px solid var(--FC1);
	border-bottom: 1px solid var(--FC1);
}
table.Actions th {
	padding: 3px 0px;
	color: var(--BC1);
	background-color: var(--FC1);
}
table.Actions th > div:nth-child(1) {
	font-size: 12px;
	font-weight: normal;
}
table.Actions th > div:nth-child(2) {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
}
table.Actions th > div:nth-child(2) > div:nth-child(1) {
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0px;
	text-align: right;
}
table.Actions th > div:nth-child(2) > div:nth-child(2) {
	width: 80px;
	flex-shrink: 0;
}
table.Actions th > div:nth-child(2) > div:nth-child(3) {
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0px;
	text-align: left;
}
table.Actions td {
 	padding: 2px 4px;
	font-size: 12px;
}
table.Actions tr.SubHead > td {
	font-size: 14px;
	text-align: center;
	color: var(--FC2);
	background-color: var(--BC2);
}
table.Actions td:nth-child(1) {text-align: center;}
table.Actions td:nth-child(2) {text-align: left;}
table.Actions p.Score {font-size: 16px;}
table.Actions p.Scorer {font-size: 14px;}
table.Actions p.GK {font-size: 12px;color: gray;}
table.Actions p.OoL {color: red;}
table.Actions p.OoG {color: yellowgreen;}
table.Actions p.Crono {font-size: 15px;}
table.Actions th > span {display: block; font-size: 11px;}
/****************************************************************************************/
.Virtual {opacity: 35%;}
.Ahora {
  animation-name: Flash;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.Hand {cursor: pointer;}
.Bold {font-weight: bold;}
/****************************************************************************************/
#Foot {
	display: flex;
	bottom: 0px; height: 20px;
	justify-content: flex-end;
	align-items: center;
	padding: 0px 15px;
	font-size: 10px; font-style: italic;
	color: var(--BC1);
	background-color: var(--FC1);
}
#Foot::before {content: "Powered by TECNO HOCKEY";}
/****************************************************************************************/
/***                                       EFECTOS                                    ***/
/****************************************************************************************/
@keyframes Flash{
	0% {background: #D9F2D0;}
	50% {background: #B4E5A2;}
}
/****************************************************************************************/
/***                                    MEDIA QUERIES                                 ***/
/****************************************************************************************/
@media (min-width: 1040px) {
	#SubHead {justify-content: center;}
}