/*************************************************************************************************
 *
 *										Palheta1.css
 *
 *		Estilos
 *
 *		Autor:		 Oswaldo Vernet
 *		Data:		 15.05.2026
 *		Atualização: 	
 *
 *************************************************************************************************/

:root
{
    --verde-escuro: #295700;
	--verde-borda: #427B50;
	--verde-fundo: #E0F2DD;
	--verde-fundo-botao: #CCDEC9;
	--verde-fundo-botao-rgb: 204,222,201;	/* #CCDEC9 */
	--verde-menu: #2E7D32;
	--verde-contraste: #B8CDB4;
	--verde-fundo-popup: #F0F9F0;
    --azul-petroleo: #0A5A6A;
	--branco-sujo: #F6F9FA;
}

*, *::before, *::after
{
	box-sizing: border-box;
	outline: none;
}

body
{
    font-family: Georgia;
    font-size: 16px;
	background-color: var(--verde-fundo);
    color: var(--verde-escuro);
}

h1
{
    margin-top: 2pt;
    margin-bottom: 10pt;
    font-family: Georgia;
    font-size: 32px;
    font-weight: bold;
    color: var(--verde-escuro);
}

hr
{
    border-color: var(--azul-petroleo);
	margin: 4px 1px;
}

button
{
	border-radius: 8px;
	border: 1px solid var(--azul-petroleo);
}

input
{
	display: inline-block; 
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 750;
    color: var(--azul-petroleo);
    cursor: pointer;
    padding: 1px 1px 3px 1px;
    border: 1px solid var(--azul-petroleo);
    border-radius: 8px;
}

input::placeholder
{
    font-family: "Courier New", Courier, monospace;
	font-size: 90%;
	text-align: center;
	color: #CCC;
}

select, option
{
	width: 300px;
}

select::placeholder
{
    font-family: "Courier New", Courier, monospace;
	font-size: 90%;
	text-align: center;
	color: #CCC;
}

.imgheader
{
    height: 140px;
    border: 1px solid var(--verde-borda);
}

.emoji
{
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
}

/*************************************************************************************************
 *		Painel principal e subpainéis
 *************************************************************************************************/

.panel
{
	display: block; 
}

.panel.inactive
{
	display: none; 
}

.subpanel
{
	display: none; 
}

.subpanel.active
{
	display: inline-block; 
	background-color: var(--verde-contraste);
	border: 1px solid var(--azul-petroleo);
    border-radius: 8px;
	margin-left: 80px;
	padding: 20px 20px 20px 20px;
}

.hint
{
	font-size: 	 80%;
	font-weight: bold;
}

.smallfont
{
	font-size: 13px;
}

/*************************************************************************************************
 *		Input's diversos
 *************************************************************************************************/

input[type="text"]			 { width: 120px; }
input[type="text"].vvlongbox { width: 620px; }
input[type="text"].vlongbox  { width: 600px; }
input[type="text"].mlongbox  { width: 300px; }
input[type="text"].longbox   { width: 210px; }
input.shortbox               { width:  64px; }

/*************************************************************************************************
 *		Div's diversos
 *************************************************************************************************/

legend				{ font-size: 120%; font-weight: bold; margin-bottom: 15px; }
div.header          { display: flex; flex-direction: row; align-items: center; gap: 20px; }
div.sameline        { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 4px; }
div.spacebefore     { margin-top: 20px; }
div.vspace          { margin-top: 5px; margin-bottom: 5px; }
div.vvspace         { margin-top: 10px; margin-bottom: 5px; }
div.menu            { display: flex; flex-direction: row; margin-bottom: 24px; }

div.form
{
	display: grid;
	align-items: center;
	grid-template-columns: max-content 1fr; /* A primeira coluna se ajusta ao maior label */
	gap: 8px 16px;
}

div.publisher
{
	display: grid;
	align-items: center;
	grid-template-columns: max-content 1fr; /* A primeira coluna se ajusta ao maior label */
	gap: 8px 16px;
	margin-top: 10px; margin-bottom: 5px;
	padding: 4px 10px 4px 10px;
	border: 1px solid var(--azul-petroleo);
	border-radius: 8px;
    background-color: var(--verde-fundo-botao);
}

div.unframed-publisher
{
	display: grid;
	align-items: center;
	grid-template-columns: max-content 1fr; /* A primeira coluna se ajusta ao maior label */
	gap: 8px 16px;
	margin-top: 10px; margin-bottom: 5px;
	padding: 4px 10px 4px 10px;
}

div.header-element
{
	display: none;
	margin-bottom: 5px;
	margin-top: 10px;
}

div.header-element.active
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.threecolumns   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px 4px; }
.twocolumns     { display: grid; grid-template-columns: repeat(2, max-content); gap: 0px 4px; }

/*************************************************************************************************
 *		Span's diversos
 *************************************************************************************************/

span.slabel		{ display: inline-block; width:  50px; }
span.ylabel		{ display: inline-block; width:  90px; font-weight: bold; }
span.label		{ display: inline-block; width: 150px; }
span.wlabel		{ display: inline-block; width: 180px; }
span.llabel		{ display: inline-block; width: 210px; }
span.hlabel		{ display: inline-block; width: 250px; }
span.hhlabel	{ display: inline-block; width: 640px; }
span.adlabel	{ white-space: nowrap; }

span#error
{
	display: inline-block;
	padding: 10pt;
}

span.check
{
	display: none;
	font-size: 20px;
	font-weight: 750;
}

span.check.ok
{
	display: inline-block;
	color: #007BFF;
}

span.check.error
{
	display: inline-block;
	color: #DC3545;
}

/*************************************************************************************************
 *		Botões diversos
 *************************************************************************************************/

button.arrow
{
	display: inline;
    padding: 2px 0px 0px 0px;
	width: 20px;
	height: 20px;
    font-weight: 750;
}

button.menu
{
    font-size: 13px;
	font-weight: bold;
    background-color: var(--verde-fundo-botao);
    color: var(--verde-escuro);
    cursor: pointer;
    padding: 3px 3px 2px 3px;
    border-radius: 0px 12px 0px 4px;
    border: 1px solid var(--azul-petroleo);
	margin-right: 1px;
}

button.menu.active
{
    background-color: #B8CDB4; /* verde mais forte */
    color: var(--verde-escuro);
    border: 1px solid var(--azul-petroleo);
}

button.menu:hover
{
    background-color: #3C8F40; /* verde mais forte */
    color: var(--branco-sujo);
    border: 1px solid var(--azul-petroleo);
}

button.ehmenu
{
    font-size: 13px;
    background-color: var(--verde-menu);
    color: var(--branco-sujo);
	margin-right: 10px;
    padding: 3px 8px 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--azul-petroleo);
}

/*************************************************************************************************
 *		Diálogo modal
 *************************************************************************************************/

.dialog-overlay
{
	display: none;
}

.dialog-overlay.active
{
	display: flex;
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(66,123,80,0.5);
	flex-direction: column; gap: 5px;
	justify-content: center;
	align-items: center;
    border: 1px solid var(--azul-petroleo);
	z-index: 9999;
}

.dialog-result
{
    font-family: Times New Roman;
    font-size: 12px;
	width: 630px;
	max-height: 300px;
    border: 1px solid var(--azul-petroleo);
    border-radius: 8px;
    overflow: auto;
	margin-bottom: 10px;
}

.dialog-report
{
	display: block;
    font-family: Times New Roman;
    font-size: 15px;
    background-color: white;
    color: black;
	padding: 10pt;
}

.large
{
	display: inline-block;
	width: 490px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: var(--azul-petroleo);
}

.italic
{
	font-style: italic;
}

/*************************************************************************************************
 *		Fieldsets e radio groups
 *************************************************************************************************/

.radio-group
{
	width: 236px;
	border: none;
}

.radio-group label
{
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
}

/*************************************************************************************************
 *		Menu popup
 *************************************************************************************************/

.popup-wrapper
{
	position: relative;				/* referência para o .popup absolute */
	display: inline-block;
}

.popup
{
	display: none;
	position: absolute;
	border: 2px solid rgb(204,222,201);
	top: 100%;
	left: 100%;
	transform: translateX(-100%);
	border-radius: 0px 8px 8px 8px;	
	box-shadow: 8px 8px 8px rgba(var(--verde-fundo-botao-rgb), 0.9);
}

.popup.open
{
	display: block;
    background-color: var(--verde-fundo-popup);
    color: var(--azul-petroleo);
	z-index: 9999;
}

.popup ul
{
	display: grid;
    font-size: 12px;
	font-weight: bold;
	align-items: center;
	grid-template-columns: max-content max-content max-content;
	gap: 2px 8px;
	padding: 0px 4px 0px 4px;
	list-style: none;
}

.popup li
{
	padding: 4px 10px 4px 10px;
	cursor: pointer;
}

.popup li:hover,
.popup li:focus
{
	background: var(--verde-escuro);
    color: var(--branco-sujo);
	outline: none;
}

.date-row
{
	display: grid;
	grid-template-columns:
		4ch 14ch 8ch   /* início */
		4ch 14ch 8ch;  /* fim */
	gap: .4rem;
	margin-top: .6rem;
	align-items: center;
}

.errormsg
{
	font-size: 80%;
	font-weight: bold;
	color: darkred;
	border-radius: 4px;
	border: 2px solid darkred;
	padding: 2px 4px;
}

/*************************************************************************************************
 *		Selects
 *************************************************************************************************/

.select
{
	position: absolute;
	top: 100%;
	left: 0;
	display: inline-block;
    font-size: 14px;
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding: 5px 10px;
	border-radius: 3px;
	border: 1px solid var(--azul-petroleo);
	background: var(--branco-sujo);
	z-index: 1000;
}

.lselect
{
	display: block;
	width: 310px;
	height: 200px;
	overflow-x: auto;
	overflow-y: auto;
    font-size: 10px;
	font-weight: bold;
	list-style: none;
	padding: 5px 10px;
	border-radius: 3px;
	border: 1px solid var(--azul-petroleo);
	background: var(--branco-sujo);
}

ul.hidden
{
	display: none;
}

.select_item
{
	cursor: pointer;
	padding: 3px;
}

.tiny_select_item
{
	cursor: pointer;
	padding: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
	height: 15px;
	white-space: nowrap;
}

.btiny_select_item
{
	cursor: pointer;
	padding: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
	height: 15px;
	white-space: nowrap;
}

.select_item:hover,
.select_item:focus
{
	background: var(--verde-escuro);
    color: var(--branco-sujo);
	outline: none;
}

.tiny_select_item:hover,
.tiny_select_item:focus
{
	background: var(--verde-escuro);
    color: var(--branco-sujo);
	outline: none;
}

.select_input
{
	position: relative;
	display: inline-block;
	height: 25px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 750;
	background: var(--branco-sujo);
    color: var(--azul-petroleo);
    cursor: pointer;
    padding: 1px 1ch 3px 1ch;
    border: 1px solid var(--azul-petroleo);
    border-radius: 8px;
}

.select_input::after
{
	content: "▼";
    font-size: 12px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}