html						{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body 						{background:var(--primary);line-height:1.5;color:#333;}
body,button,input,textarea  {font-family:system-ui,-apple-system,sans-serif;}
*							{box-sizing:inherit;}
html,body					{margin:0;padding:0;height:100%;}
button,img,svg              {user-select:none;}
a                           {color:var(--primary-text);text-decoration:none;transition:color 0.3s;}
a:hover                     {color:var(--highlight);}
table						{border-collapse:collapse;width:100%;}
th,td						{padding:12px;text-align:left;}
th							{background:#f8f9fa;font-weight:600;border-bottom:2px solid #eee;}
td							{border-bottom:1px solid #eee;}
tr:hover					{background:#f8f9ff;}


#app {
	min-height:100vh;
}

/* Utility */
.container {
	max-width:1200px;
	margin:0 auto;
	padding:0 20px;
}


/* Scrollbar */
::-webkit-scrollbar {
	width:8px;
	height:8px;
}

::-webkit-scrollbar-track {
	background:#f1f1f1;
}

::-webkit-scrollbar-thumb {
	background:#888;
	border-radius:4px;
}

::-webkit-scrollbar-thumb:hover {
	background:#555;
}
.hidden						{display:none;}
.loading                    {opacity:0.5;pointer-events:none;}
.gui-toolbar				{justify-content:space-between;align-items:center;display:flex;}
.gui-nav    				{flex-wrap:nowrap;display:flex;color:red;}
.gui-nav ul					{white-space:nowrap;overflow:scroll;width:100%;min-height:42px;list-style:none;}
.gui-nav li
{
	align-items: center;
    border: 0;
    margin: 0;
    padding: 0;
	font-weight:300;
	font-size: 18px;
	cursor: pointer;
	    list-style: none;
}
.gui-vertical				{display:block;margin-bottom:12px;}
.gui-horizontal				{display:flex;gap:8px;align-items:center;}
.gui-window					{background:white;border-radius:1rem;padding:1.5rem;border:1px solid #e5e7eb;}
.gui-window-title			{font-size:1.125rem;font-weight:600;color:#1f2937;margin-bottom:1.5rem;}
.gui-button-mini			{padding:0.375rem 1rem;border-radius:0.6rem;font-size:0.8rem}
.gui-button-secondary		{background-color:var(--secondary);color:#6b7280;}
.gui-button-secondary:hover	{background-color:var(--secondary-light);}
.primary					{background-color:var(--primary);color:var(--primary-text);}
.primary:hover				{background-color:var(--primary-light)}
.gui-field					{display:flex;flex-direction:column;font-weight:600;color:#234;margin:0.5rem 0 0 0;font-size:0.9rem;}
input .gui-field,
.gui-field textarea,
.gui-field select			{padding:0.75rem;border:1px solid #eef;
								/*border-radius:0.75rem;*/
								border-radius:1rem;
								border: 2px solid #000;
								background:var(--primary-dark);
								color:var(--primary-text);
								margin-top:0.5rem;}
.gui-field textarea			{height:8rem;resize:vertical;}

/****************************\
   INPUT, TEXTAREA, SELECT
\****************************/
input,button,textarea		{border-radius:1rem;font-size:1rem;width:100%;transition:all 0.3s;margin:0.25rem 0;padding:1rem 0.5rem;}
input,button				{text-align:center;}
input,textarea,select       {color:#333;}
input[type="email"],
input[type="text"],
input[type="password"]		{border:1px solid var(--primary-light);}
input:focus					{}
input:active				{}
input::placeholder			{text-align:center;}
/****************************\
		   BUTTON
\****************************/
button{
	font-variant-emoji:text;
	font-weight:500;
	border:none;
	cursor:pointer;
	white-space:nowrap;
	box-shadow:0 0 10px -5px #000;
}
button:disabled             {opacity:0.6;cursor:not-allowed;}
button.loading				{pointer-events:none;position:relative;}
button.loading::before		{content:'';position:absolute;width:1.5rem;height:1.5rem;left:50%;top:50%;transform:translate(-50%,-50%);border:0.2rem solid #ccc;border-top-color:#333;border-radius:50%;animation:spin 0.3s linear infinite;}
@keyframes spin				{to{transform:translate(-50%,-50%)rotate(360deg);}}
/****************************\
		   UPLOAD
\****************************/
.upload-field				{max-width:600px;font-family:inherit;}
.upload-title				{display:block;font-weight:600;margin-bottom:0.5rem;color:#374151;}
.upload-box					{border:2px dashed #cbd5e1;border-radius:0.75rem;padding:0.5rem;text-align:center;cursor:pointer;position:relative;background:#f8fafc;}
.upload-box:hover			{background:#f1f5f9;}
.upload-content				{display:flex;flex-direction:column;gap:0.5rem;align-items:center;color:#64748b;}
.upload-icon				{color:var(--highlight);font-size:1.5rem;}
.upload-text				{font-size:0.95rem;}
.upload-box img				{max-width:100%;max-height:200px;display:block;margin:0 auto;border-radius:0.5rem;}
/****************************\
		   ERROR
\****************************/
.error-overlay				{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:300;cursor:pointer;}
.error-icon					{width:50px;height:50px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f44;font-weight:700;font-size:1.5rem;}
.error-text					{font-size:0.95rem;line-height:1.5;font-weight:500;text-align:center;}
.error-close				{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:white;font-size:1.5rem;cursor:pointer;padding:0;width:2rem;height:2rem;}
.error-notification			{display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(239,68,68,0.95);color:white;padding:2rem;
							border-radius:1.25rem;z-index:301;width:auto;max-width:90%;min-width:280px;flex-direction:column;gap:1rem;align-items:center;
							transition:width 0.5s;}            /* Auto-adatta al contenuto */














.eg-horizontal				{display:flex;gap:8px;align-items:center;}
.eg-label					{font-weight:600;margin-bottom:4px;}
.eg-textfield,.eg-textarea	{width:100%;padding:6px;}
.eg-toggle					{transform:scale(1.2);}
.eg-button					{padding:6px 12px;cursor:pointer;}
.eg-helpbox					{padding:8px;border-radius:4px;margin-top:6px;}
.eg-info					{background:#eef4ff;}
.eg-warning					{background:#fff3cd;}
.eg-error					{background:#f8d7da;}
.eg-field					{display:flex;flex-direction:row;margin-bottom:10px;}
.eg-field-label 			{font-weight:600;padding:4px 8px;width:200px}



.modal						{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:100;}
.modal.active				{display:flex;}
.modal-content				{background:white;border-radius:1.5rem;padding:2rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;}
.modal-header				{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.modal-title				{font-size:1.25rem;font-weight:700;color:#1f2937;}
.modal-close				{background:transparent;border:none;cursor:pointer;color:#6b7280;font-size:1.5rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;}
.modal-close:hover			{color:#1f2937;}
.modal-description			{color:#6b7280;font-size:0.9rem;margin-bottom:1.5rem;line-height:1.5;}

header{
							color:var(--primary-text);
							max-width:1280px;margin:0 auto;
							background-color:var(--primary);
							border-bottom:2px solid var(--primary-dark);
							padding:15px 20px;
							box-shadow:0 2px 4px rgba(0,0,0,0.1);
							position:sticky;top:0;z-index:50;}
.header-container{
							max-width:1280px;
							margin:0 auto;
							padding:1rem 1.5rem;
							display:flex;
							align-items:center;
							justify-content:space-between;}





/* Responsive */
@media (max-width:768px) {
	body {
		font-size:16px;
	}

	.container {
		padding:0 15px;
	}
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
	* {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
	}
}

/* Print styles */
@media print {
	#app {
		background:white;
	}
}