/* Panel styles rely on global variables (defined in css/vars.css)
	 Keep the solid panel background only for pages that are not
	 using the shared radial background class to avoid covering
	 the ::before pseudo-layer. */
/* Body background is centralized in `public/css/vars.css` as
	`--background-general`. Removed conditional override so the page
	background always uses that token. */

/* Utility background is centralized in css/vars.css to keep tokens and
   background layering consistent across pages. See public/css/vars.css
   for the `.bg-background-general` definition. */

/* Tab styles for main panel */
.menu_principal input[type="radio"],.menu_nomina input[type="radio"]{display:none}
.menu_principal{display:flex;position:relative;flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;min-width:390px;margin:auto;padding-top:5px;padding-bottom:5px;height:40px;margin-bottom:-1px}
.contenidor-respons-menu-horitzontal{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;min-width:390px;margin:auto;padding-top:5px;padding-bottom:5px}
.menu_principal span{color:#fffff;font-size:11px}
.eti-menu{font-size:11px;margin-left:8px}
.menu_nomina label,.menu_principal label{display:flex;position:relative;text-align:center;justify-content:center;border:1px solid transparent;border-radius:5px;padding:4px;color:#bbb;width:15%;height:40px;margin:0;margin-bottom:-32px;background-color:var(--color-bg-menus);border:1px solid transparent;align-items:center}
.contenidor-respons-menu-horitzontal label:hover,.menu_principal label:hover{color:var(--color-text-menus);border:1px solid var(--color-border-active);background-color:var(--color-fons-clar);color:var(--color-text-menus)}
.contenidor-respons-menu-horitzontal label:active,.menu_principal label:active>span,.menu_principal label:active{color:#fffff}
.menu_principal input[type="radio"]:checked+label span,.menu_principal input[type="radio"]:checked+label>p{background-color:var(--color-fons-clar);color:var(--color-text-menus)}
.menu_principal input[type="radio"]:checked+label{background-color:var(--color-fons-clar);color:var(--color-titols);border:1px solid var(--color-border-active);border-radius:8px;margin-bottom:-20px;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;z-index:3}

/* Icon sizing for material symbols */
.material-symbols-outlined{font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48}
.xl{font-size:20px}

/* Responsive: icons-only on small screens */
@media only screen and (max-width:600px){
	.menu_principal{gap:6px;min-width:200px}
	.menu_principal label{width:auto;padding:8px 10px;height:44px;border-radius:8px}
	.eti-menu{display:none}
	.menu_principal label{justify-content:center}
}

@media only screen and (max-width:420px){
	.menu_principal{height:56px}
	.menu_principal ody 
 l abel{padding:8px}
	.xl{font-size:18px}
}
;
/* Panels and show/hide using radio+general sibling selector (JS also supports) */
.tabs-panels{{display:block;position:relative;margin:auto;background-color:var(--color-fons-clar);border:1px solid var(--color-border-active);border-radius:10px;min-height:80%}}
.tab-panel{display:none;padding:18px;background-color:var(--color-fons-clar);border:1px solid var(--color-border-active);border-radius:10px;position:relative;z-index:1;min-width:300px}
.panel-card{max-width:920px;margin:auto}

#p_rad_resumen:checked ~ .tabs-panels #p-panel-resumen,
#p_rad_ajustes:checked ~ .tabs-panels #p-panel-ajustes,
#p_rad_complementos:checked ~ .tabs-panels #p-panel-complementos,
#p_rad_incidencias:checked ~ .tabs-panels #p-panel-incidencias {
	display:block;
}

@media only screen and (max-width:600px){
	.tab-panel{padding:12px}
}

.panel-container{padding:16px;background-color:var(--color-bg-menus);border:1px solid var(--color-border-clar);border-radius:8px;margin-top:12px;color:var(--color-text-menus)}

/* --- MEDIA STYLES APPLIED GLOBALLY (duplicated from the @media rules) ---
	These rules are intentionally duplicated so the responsive styles
	also apply to all screen sizes as requested. Keep the @media blocks
	below to preserve breakpoint-specific behavior. */

/* From @media (max-width:600px) */
.menu_principal{gap:6px;min-width:200px}
.menu_principal label{width:auto;padding:8px 10px;height:44px;border-radius:8px;justify-content:center}


/* From @media (max-width:420px) */
.menu_principal{height:56px}
.menu_principal label{padding:8px}
.xl{font-size:18px}

/* End global media duplication */

/* Desktop: aumentar margen lateral del contenedor de pestañas */
@media only screen and (min-width:900px) {
	.tabs-panels{
		margin-left:6%;
		margin-right:6%;
	}
	/* Minimum width for panel cards on standard desktop screens */
	.panel-card{
		min-width:700px;
		min-height:500px;
	}
}



/* Ensure panels sit up under the tabs regardless of DOM nesting */
.tabs-container .tabs-panels{
	margin-top: -8px !important;
}

/* Ensure tab labels use the same typography as the page */
.menu_principal label,
.menu_principal label .eti-menu{
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	font-variation-settings: 'wght' 600;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height: inherit;
}