/* tts CSS 
    12/20   initial
    5/21    projectify
*/

body {
		font-family: Arial, Helvetica, Tahoma, sans-serif;
		color: black;
	}
 
 h1 {	/* sans font */
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 48pt;
		font-weight: normal;
		color:#215D64;
	}
 h2 {	/* sans font */
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 16pt;
		font-weight: normal;
		color:#215D64;
	}

/***********************/
/* link styles 		   */
a:link, a:visited {
	color:#215D64;
	text-decoration: none;
}
a:hover {
  color: #215D64;
}
a:active {
  color: purple;
}

/* menu buttons style  */
.menubutton {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 14pt;
		font-weight: normal;
		color:#215D64;					/* agave oscuro */
		background-color:#41BAC8;		/* agave claro */
		text-decoration: none;
	}
	.menubutton:hover {
		color:#215D64;  /* agave oscuro */
		background-color:#33919C;  /* agave */
	}
/*	.menubutton:selection {
		color:blue;
		background-color:#33919C;
*/
	.menubutton:visited {
		color:white;
		background-color:#41BAC8;
		text-decoration: none;
	}

/***********************/
/* menu table format   */
table {
	table-layout:auto;
    text-align: left;
}
td {
	text-align: left;
	padding: 6px;
}

/* debug to see tables */ 
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	text-align: left;
	vertical-align: top;
}

/* table list */
.listt  {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10pt;
		border-collapse:collapse;
		border-spacing:0;
		border: 0px;
		color:black;
		table-layout:auto;
	}
.listh {
		color:#215D64;
		background-color:#41BAC8;
		text-align:center;
		table-layout:auto;
	}
.listhd {
		color:#215D64;
		background-color:#41BAC8;
		text-align:right;
		table-layout:auto;
	}
.lists {
		color:black;
		background-color:#51cAd8;
		text-align:center;
		table-layout:auto;
	}
.listn {
		color:black;
		background-color:white;
		text-align:center;      /* bug? */
		table-layout:auto;
	}
.listc {
		min-width:50px;
	}


/***********************/
/* footer that always sits at the bottom of the page */
.footer {
		font-family: Arial, Helvetica, Tahoma, sans-serif;
		color: black;
		font-size: 8pt;
		text-align: center;
		position: fixed;
        padding: 10px 10px 0px 10px;
        bottom: 0;
        width: 100%;
	}
	
/* old footer - does make sure that any content that uses "footer" gets the right/same format */
footer	{
		font-family: Arial, Helvetica, Tahoma, sans-serif;
		color: black;
		font-size: 8pt;
		text-align: center;
	}


/***********************/
/* pagination styles   */
.pagi {
	text-align: center;
	margin-top: 20px;
}

.pagi-button {
	padding: 5px 10px;
	margin: 0 5px;
	cursor: pointer;
	outline: 1px solid #494a4f;
	border-radius: 1px;
	border: none;
}

.pagi-button-active {
  background-color: var(--agave-oscuro);
  color: white;
}
td.centro {					/* count columns (Marcas / Tequilas) */
	text-align: center;
}




/*********************************************************************************************************/
/* menu div at the top */
.topnav {
		text-align: center;
		text-decoration: none;
	}
/* nav links format */
.topnav a {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: calc(100% + 1vw);
		font-weight: normal;
		color: gray;
		text-align: center;
		text-decoration: none;
	}
/* change the color of links on hover */
	.topnav a:hover {
		color: blue;
	}
/* add a color to the active/current link */
	.topnav a.active {
		color: rgb(80,80,80);
	}

/***********************/
/* links in the table */
.simpletable a {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 14pt;
		font-weight: normal;
		color: blue;
		text-decoration: none;
	}
/* change the color of links on hover */
.simpletable a:hover {
		color: rgb(80,80,80);
	}
/* add a color to the active/current link */
.simpletable a.active {
		color: gray;
	}



/*********************/
/* certified - toggle in the page cell's corner, badge in the lista */
.pagina-celda {				/* the big page cell - the corner toggle positions against it */
	position: relative;
}
.cert-esquina {				/* 5px in from the page cell's upper right corner */
	position: absolute;
	top: 5px;
	right: 5px;
}
:root {
	--cert-oro: #FFD700;		/* gold center */
	--cert-borde: #E49417;		/* orange border: 50/50 of the old #C8502D and the gold - tweak both badges here */
}
.cert-boton, .cert-badge {	/* shared badge: gold C with a 1px orange outline */
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: var(--cert-oro);
	-webkit-text-stroke: 1px var(--cert-borde);		/* 1px outline on the letter's edge (works in all current browsers) */
	user-select: none;
}
.cert-boton {				/* toggle: 24x24 */
	width: 24px;
	height: 24px;
	line-height: 24px;
	font-size: 20px;
	cursor: pointer;
}
.cert-boton.apagado {		/* filter off: same C, grayed out */
	filter: grayscale(1);
	opacity: 0.5;
}
.cert-badge {				/* lista badge */
	display: block;
	font-size: 13px;
}


/*********************/
/* caballito - badge column (cert C + rank glass) and the rank popover */
:root {
	--vaso-borde: #cccccc;		/* faint glass outline */
	--agave: #33919C;			/* site agave (the "ts" in the logo) - your own vote, Confirmar */
	--agave-oscuro: #215D64;	/* dark agave (the "t" in the logo) - active pagination button */
	--vaso-gris: #d0d0d0;		/* low end of the gray -> gold slider track */
}
td.caballito {
	padding-top: 0;
	padding-bottom: 0;
}
.caballito-celda {			/* two fixed slots so the glasses line up down the column */
	display: grid;
	grid-template-columns: 16px 26px;
	align-items: center;
	justify-items: center;
}
.rank-hit {					/* click target - a bit bigger than the glass, but no taller than a text row */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 18px;
	cursor: pointer;
}
.rank-vacio {				/* no votes yet */
	width: 7px;
	height: 7px;
	border: 1px solid #999999;
	border-radius: 1px;
}
.vaso {
	position: relative;
	width: 16px;
	height: 17px;
}
.vaso svg { display: block; }
.vaso-numero {				/* average, laid over the bottom of the glass */
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translateX(-50%);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #6b6b66;
	pointer-events: none;
	text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff;
}
.caballito-fondo {			/* invisible layer - a click anywhere outside the popover closes it */
	position: fixed;
	inset: 0;
	z-index: 100;
}
.caballito-pop {
	position: fixed;
	z-index: 101;
	width: 120px;			/* was 90px - fits "Promedio 7.8 · 12 votos" on one line */
	padding: 10px;
	background: #ffffff;
	border: 1px solid #d9d9d4;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.caballito-promedio {		/* everyone's rating, above your number */
	text-align: center;
	font-size: 10px;
	color: #6b6b66;
	margin-bottom: 4px;
}
.caballito-promedio:empty {
	display: none;
}
.caballito-valor {
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 6px;
}
.caballito-riel {			/* square box the rotated slider sits in */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 92px;
}
input.caballito-rango {		/* native slider turned vertical: 0 at the bottom, 10 at the top */
	width: 92px;
	height: 18px;
	transform: rotate(-90deg);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}
input.caballito-rango::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--vaso-gris), var(--cert-oro));
}
input.caballito-rango::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -5px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--cert-borde);
}
input.caballito-rango::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--vaso-gris), var(--cert-oro));
}
input.caballito-rango::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--cert-borde);
}
.caballito-confirmar {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 6px 0;
	font-family: inherit;
	font-size: 11px;
	color: #ffffff;
	background: var(--agave);
	border: 1px solid var(--agave);
	border-radius: 3px;
	cursor: pointer;
}


.caballito-confirmar:disabled {
	opacity: 0.6;
	cursor: default;
}
.caballito-aviso {			/* vote failed / too many votes */
	margin-top: 6px;
	text-align: center;
	font-size: 10px;
	color: #a33333;
}
.caballito-aviso:empty {
	display: none;
}


/*********************/
/* suggestion fields */
#dynamic-sug-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;		/* same gap below the target_tabla row */
}

.field-row {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;

	display: grid;
	grid-template-columns: 150px 250px; 		/* label width, input width — adjust to taste */
	gap: 12px;
	align-items: center;
}
.field-row label {
	text-align: right; /* label */
}
.field-row input, .field-row select, .field-row textarea {
	text-align: left; /* field body */
}
.field-row textarea {
	font: inherit;			/* textareas default to monospace */
	resize: vertical;		/* taller is fine, wider would break the grid */
}
.field-row:has(textarea) label {
	align-self: start;		/* label sits at the top of a tall box, not the middle */
}
.field-row input[type=checkbox] { 
	justify-self: start; 
}