.calendar-card{display:flex;flex-direction:column;padding:18px;border-radius:10px;background:var(--panel-light);color:var(--text);box-sizing:border-box}
/* ensure horizontal scroll inside the calendar card instead of overflowing the page */
.calendar-card{overflow-x:auto}
.cal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cal-controls{display:flex;gap:8px;align-items:center}
/* calendar grid will size rows naturally so the card can grow to show legend */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(80px,1fr));grid-auto-rows:auto;gap:6px;width:100%;box-sizing:border-box;flex:1 1 auto}
.cal-day{padding:10px;background:rgba(255,255,255,0.02);border-radius:6px;text-align:right;min-height:64px;min-width:0;box-sizing:border-box}
.cal-day.header{font-weight:700;text-align:center;background:transparent}
.cal-day.today{background:var(--accent);color:#fff}
.month-label{font-weight:700}

/* day number positioned near top-left with a consistent margin */
.cal-day .day-num{position:absolute;right:6px;top:2px;font-weight:700;font-size:0.95rem;color:inherit;z-index:3}

/* Mark day number red when marked as jornada extra (first or second) */
.cal-day .day-num.day-je1,
.cal-day .day-num.day-je2{
	color: #c00;
}

.cal-day.in-project{box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25)}
.cal-day.selected{box-shadow: inset 0 0 0 2px var(--accent)}

/* day type highlights: border + subtle semi-transparent background */
.cal-day.type-completa{border:2px solid rgba(0,128,0,0.32);background:rgba(0,128,0,0.06)}
.cal-day.type-completa.active{background:rgba(0,128,0,0.10)}
.cal-day.type-media{border:2px solid rgba(255,165,0,0.32);background:rgba(255,165,0,0.04)}
.cal-day.type-media.active{background:rgba(255,165,0,0.08)}
.cal-day.type-libre{border:2px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.04)}
.cal-day.type-libre.active{background:rgba(255,255,255,0.08)}
.cal-day.type-viaje{border:2px solid rgba(0,123,255,0.32);background:rgba(0,123,255,0.04)}
.cal-day.type-viaje.active{background:rgba(0,123,255,0.08)}

/* small green dot when a day has entry and exit times */
/* entry dot: size relative to cell width (cap with min) so it scales with calendar */
.cal-day .entry-dot{
	width: 8px;
	height: 8px;
	aspect-ratio: 1/1;
	border-radius:50%;
	background:var(--accent);
	display:inline-block;
	box-shadow:0 6px 14px rgba(4,170,109,0.18);
	/* nudge from left to create breathing room between dots */
	position:absolute;left:20%;top:75%;transform:translateY(-50%);
}
.cal-day{position:relative}

/* red dot when overtime > 0 */
.cal-day .overtime-dot{
	width: 8px;
	height: 8px;
	aspect-ratio: 1/1;
	border-radius:50%;
	background:#e53935;
	display:inline-block;
	box-shadow:0 6px 14px rgba(229,57,53,0.18);
	/* nudge from right to create breathing room between dots */
	position:absolute;right:20%;top:75%;transform:translateY(-50%);
}

/* blue dot when any complement is checked in the shift modal */
.cal-day .complement-dot{
	width: 8px;
	height: 8px;
	aspect-ratio: 1/1;
	border-radius:50%;
	background:#1976d2;
	display:inline-block;
	box-shadow:0 6px 14px rgba(25,118,210,0.18);
	/* fallback absolute position if not inside .dot-row */
	position:absolute;left:50%;top:75%;transform:translate(-50%,-50%);
	z-index:1;
}

/* dot container: first two dots placed side-by-side on top row; third spans both columns centered below */
.cal-day .dot-row{
	position:absolute;
	left:50%;
	top:65%;
	transform:translate(-50%,-50%);
	display:grid;
	grid-template-columns: 8px 8px;
	grid-auto-rows: 8px;
	gap:6px 8px; /* row-gap column-gap */
	align-items:center;
	justify-content:center;
	pointer-events:none;
	z-index:1;
	width: calc(8px * 2 + 8px);
}
.cal-day .dot-row > span{ position:static; width:8px; height:8px; aspect-ratio:1/1; transform:none; margin:0; display:block }
.cal-day .dot-row > span:nth-child(3){ grid-column: 1 / 2; justify-self:start }
.cal-day .dot-row .entry-dot,
.cal-day .dot-row .overtime-dot{
	/* nudge top-row dots upward so they sit around ~65% of cell */
	transform: translateY(-10%);
}

/* New: render compact horizontal "event bars" inside each calendar cell (like Google Calendar) */
.cal-day .bar-row{
	/* part of normal flow so cell height grows when needed */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
	z-index: 2;
	max-height: none; /* allow growth */
	overflow: visible;
	margin-top: 12px; /* reduced vertical spacing so bars sit slightly lower below the day number */
	 /* extend nearly to the cell edges but keep 2px margin either side
		 (compensate for .cal-day padding:10px) */
	 left: -8px; /* -10 + 2px margin */
	 width: calc(100% + 16px); /* +20 - 4px total margin */
	align-self: stretch;
	box-sizing: border-box;
}
	.cal-day .time-bar{
	height: 14px;
	border-radius: 2px;
		padding: 0 6px 0 1px; /* minimal left padding so text sits as close as possible to bar edge */
	text-align: left;
	font-size: 11px;
	line-height: 14px;
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
		text-overflow: clip;
	box-sizing: border-box;
	display: block;
}
.cal-day .entry-bar{ background: var(--accent); }
.cal-day .overtime-bar{ background: #e53935; }
.cal-day .comp-bar{ background: #1976d2; }
/* diet-specific complement bar (orange) */
.cal-day .comp-bar.diet-bar{ background: #ff9800; box-shadow:0 6px 14px rgba(255,165,0,0.18); color: #fff; }

/* mobile: slightly larger bars and spacing to improve readability */
@media (max-width: 480px){
	/* On small screens, avoid using relative 'bottom' which lifted bars
	   toward the day number — instead increase top spacing so bars sit
	   lower below the day number. */
	.cal-day .bar-row{ margin-top:26px; left: -10px; gap:6px; width: calc(100% + 20px); }
	.cal-day .time-bar{ height:16px; font-size:12px; line-height:16px; border-radius:2px; padding:0 6px 0 1px; text-align:left }
}

/* Mobile adjustments: reduce dot size slightly and increase spacing inside small cells */
@media (max-width: 480px){
	.cal-day{padding:12px}
	.cal-day .entry-dot, .cal-day .overtime-dot, .cal-day .complement-dot{
		width: 8px;
		height: 8px;
		aspect-ratio: 1/1;
		box-shadow:0 4px 8px rgba(0,0,0,0.12);
	}
	.cal-day .entry-dot{ left:18%; }
	.cal-day .overtime-dot{ right:18%; }
	.cal-day .complement-dot{ left:50%; transform:translate(-50%,-50%); }
}

/* On small screens the card is horizontally scrollable; columns have a sensible min width to avoid layout jumps */
.calendar-card{ -webkit-overflow-scrolling: touch }

/* Monthly summary panel: make it match the width of the salary breakdown
   by using full width inside the right-side column. */
#monthlySummary{
	box-sizing:border-box;
	background:var(--panel-light);
	border-radius:10px;
	padding:12px 14px;
	width:100%;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	border:1px solid rgba(255,255,255,0.03);
}

/* Grid layout for dashboard: calendar left, info panels right */
.dashboard-grid{
	display:grid;
	grid-template-columns: 1fr 300px; /* calendar flexible, side panel slightly narrower to enlarge calendar */
	gap:24px;
	align-items:start;
	width:100%;
	box-sizing:border-box;
}

.calendar-panel{min-width:0}
.calendar-panel .calendar-card{height:auto;min-height:55vh;max-height:none;overflow:visible;padding-bottom:32px}

.info-panels{display:flex;flex-direction:column;gap:18px}
.resumen-mes aside{background:var(--panel-light);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(0,0,0,0.04)}

/* Salary breakdown uses a green-tinted panel to match .cal-day.type-completa */
.desglose-salarial .salary-breakdown{
	background: var(--accent);
	color: #ffffff;
	padding:12px;
	border-radius:10px;
	border:1px solid rgba(4,170,109,0.12);
	box-shadow:0 6px 18px rgba(4,170,109,0.12);
}

/* Make headings inside the green panel more legible */
.desglose-salarial .salary-breakdown h4{color:#fff}

/* Button inside the salary breakdown matches #monthlySummary background */
#openPayrollAdjustmentsBtn{
	background: var(--panel-light);
}
#openPayrollAdjustmentsBtn:hover{
	filter: brightness(1.12);
}
body.bg-background-general #openPayrollAdjustmentsBtn,
body.mi-degradado-radial #openPayrollAdjustmentsBtn{
	background: var(--calendar-bg);
}
.desglose-salarial .salary-breakdown #salaryContent div{color:rgba(255,255,255,0.95)}

/* separators under each salary breakdown section (but not the TOTAL row which has its own border-top) */

.desglose-salarial .salary-breakdown #salaryContent > div{border-bottom:1px solid rgba(255,255,255,0.75);padding-bottom:8px;margin-bottom:8px}
.desglose-salarial .salary-breakdown #salaryContent > div[style*="border-top"]{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* Remove separator under the Total Complementos row */
.desglose-salarial .salary-breakdown #salaryContent > #rowTotalComplements{border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:0 !important}

/* Match row style (margins/padding/borders) to Total Complementos */
.desglose-salarial .salary-breakdown #salaryContent > #rowSpecialHeader,
.desglose-salarial .salary-breakdown #salaryContent > #rowOvertimePay,
.desglose-salarial .salary-breakdown #salaryContent > #rowTotalDiets,
.desglose-salarial .salary-breakdown #salaryContent > #rowTravelDays,
.desglose-salarial .salary-breakdown #salaryContent > #rowTotalComplements{
	border-bottom:0 !important;
	padding-bottom:0 !important;
	margin-bottom:0 !important;
}

/* Match details block spacing to complements details */
.desglose-salarial .salary-breakdown #salaryContent > #specialDaysDetails,
.desglose-salarial .salary-breakdown #salaryContent > #overtimeDetails,
.desglose-salarial .salary-breakdown #salaryContent > #dietsDetails,
.desglose-salarial .salary-breakdown #salaryContent > #travelDetails,
.desglose-salarial .salary-breakdown #salaryContent > #complementsDetails{
	margin-top:0 !important;
}

/* Unify detail rows color in salary breakdown with complements breakdown style */
.desglose-salarial .salary-breakdown #salaryContent #specialDaysDetails,
.desglose-salarial .salary-breakdown #salaryContent #overtimeDetails,
.desglose-salarial .salary-breakdown #salaryContent #dietsDetails,
.desglose-salarial .salary-breakdown #salaryContent #travelDetails,
.desglose-salarial .salary-breakdown #salaryContent #complementsDetails,
.desglose-salarial .salary-breakdown #salaryContent #specialDaysDetails *,
.desglose-salarial .salary-breakdown #salaryContent #overtimeDetails *,
.desglose-salarial .salary-breakdown #salaryContent #dietsDetails *,
.desglose-salarial .salary-breakdown #salaryContent #travelDetails *,
.desglose-salarial .salary-breakdown #salaryContent #complementsDetails *{
	color: var(--panel) !important;
}

/* remove bottom separator under the last row to avoid a trailing line */
.desglose-salarial .salary-breakdown #salaryContent > div:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}

/* Make each panel inside the right column take the full column width */
.info-panels > *{width:100%;box-sizing:border-box}

/* Ensure the parent .card still contains the grid cleanly */
.card.dashboard{padding:18px}

/* Summary content styles */
#monthlySummary h4{margin:0 0 8px 0;font-size:1rem}
#monthlySummary #summaryContent{font-size:0.95rem;color:var(--text);line-height:1.4}
#monthlySummary .summary-content{display:flex;flex-direction:column;gap:8px}
.summary-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 12px;
	min-height:40px;
	box-sizing:border-box;
	border: 1px solid var(--color-border-active); /* blanco con 50% de transparencia */
	border-radius:8px;
	gap:8px;
}
.summary-item::before{ display:none; }

/* position the icon over the circle and force it to render as a white glyph */
.cuadrado {
	display: inline-block;
	width: 30px;
	height: 30px;
	aspect-ratio: 1/1;
	/* color del botón submit (#2ecc71) con 50% de opacidad */
	background-color: rgba(46,204,113,0.5);
	border-radius: 20%;
	vertical-align: middle;
	margin-right: 8px;
	position: relative;
	/* icono centrado y ligeramente más pequeño que el círculo */
	background-image: url("../img/icon-jornada.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80% 80%; /* icono un poco más pequeño que el contenedor */
	overflow: hidden;
}
/* Cuadrado específico para horas extras: icono y color rojo */
.cuadrado.extra{
	background-image: url("../img/icon-extra-hour.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80% 80%;
	background-color: rgba(229,57,53,0.5); /* rojo semitransparente */
}
/* Cuadrado para Complementos: icono y color azul */
.cuadrado.complementos{
	background-image: url("../img/icon-complemento.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80% 80%;
	background-color: rgba(25,118,210,0.5); /* azul semitransparente */
}
/* Cuadrado para Dietas: icono y color naranja */
.cuadrado.dietas{
	background-image: url("../img/icon-diets.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80% 80%;
	background-color: rgba(255,165,0,0.5); /* naranja semitransparente */
}
/* Cuadrado para Días de viaje: icono y color blanco */
.cuadrado.viaje{
	background-image: url("../img/icon-coche.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80% 80%;
	background-color: rgba(255,255,255,0.5); /* blanco */
}
.summary-item .summary-icon{
	position:absolute;
	left:7px;
	top:50%;
	transform:translateY(-50%);
	width:26px;
	height:26px;
	object-fit:contain;
	display:block;
	filter:grayscale(1) brightness(0) invert(1);
	-webkit-filter:grayscale(1) brightness(0) invert(1);
}

.summary-text{display:flex;flex-direction:column}
.summary-label{font-weight:700;font-size:0.95rem}
.summary-label.summary-label-split{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.summary-label-main{display:inline-flex;align-items:center;min-width:0}
.summary-value{color:var(--muted);font-weight:600}
.summary-label .summary-value-inline{display:inline-block;margin-left:8px;color:var(--muted);font-weight:700}
.summary-diets-list{display:flex;flex-direction:column;gap:4px;color:var(--muted);margin-top:4px}

#monthlySummary #sumDiets div,
#monthlySummary #sumWorked div{font-size:0.92rem;color:var(--muted);}

/* Responsive: stack panels on small screens */
@media (max-width: 480px){
	.cal-day{padding:12px;min-height:90px}
	.resumen-mes aside, .desglose-salarial{width:100%;}
}

/* Improve mobile layout: stack dashboard grid, avoid overlaps and keep header readable */
@media (max-width: 780px){
	.dashboard-grid{grid-template-columns:1fr;gap:12px}
	.info-panels{gap:12px}

	/* let calendar card grow naturally and avoid internal scrolling on small screens */
	.calendar-panel .calendar-card{height:auto;max-height:none;overflow:visible}

	/* calendar grid: allow rows to size automatically (no forced equal heights) */
	.cal-grid{grid-auto-rows:auto;grid-template-columns:repeat(7,minmax(48px,1fr));gap:6px}
	.cal-day{min-height:80px}

	/* header stacks: title on first line, button on second aligned right */
	header{flex-direction:column;align-items:stretch;gap:8px}
	header > div:nth-child(3){margin-left:0;margin-top:0;align-self:flex-end}

	/* make sure the icon and title sit together without overlap */
	header svg.icon-computer{flex:0 0 28px;margin-right:8px}
	header > div:nth-child(2){display:flex;align-items:center;gap:8px}

	/* right column panels full width */
	.info-panels > *{width:100%}

	/* avoid fixed positioning that could cause overlaps */
	.calendar-panel .calendar-card{position:relative}
}

/* Tweak header area spacing so summary and header controls align */
.cal-header{align-items:center}

/* Calendar legend */
.calendar-legend{margin-top:12px;border-top:1px solid rgba(255,255,255,0.03);padding-top:12px;color:var(--text);font-size:0.95rem}

/* single-line paragraph style for legend */
.calendar-legend .legend-paragraph{margin:0;font-size:0.95rem;color:var(--text);line-height:1.4}
.calendar-legend .legend-paragraph .legend-swatch{display:inline-block;vertical-align:middle;width:8px;height:8px;border-radius:2px;margin:0 6px}
.calendar-legend .legend-paragraph .legend-dot{display:inline-block;vertical-align:middle;width:8px;height:8px;border-radius:50%;margin:0 6px}

.calendar-legend .legend-paragraph .swatch-completa{
	box-sizing:border-box;
	width:12px;
	height:12px;
	border-radius:2px;
	background:rgba(0,128,0,0.06);
	border:2px solid rgba(0,128,0,0.32);
}
.calendar-legend .legend-paragraph .swatch-media{
	box-sizing:border-box;
	width:12px;
	height:12px;
	border-radius:2px;
	background:rgba(255,165,0,0.04);
	border:2px solid rgba(255,165,0,0.32);
}
.calendar-legend .legend-paragraph .swatch-libre{
	box-sizing:border-box;
	width:12px;
	height:12px;
	border-radius:2px;
	background:rgba(255,255,255,0.04);
	border:2px solid rgba(255,255,255,0.22);
}
.calendar-legend .legend-paragraph .swatch-viaje{
	box-sizing:border-box;
	width:12px;
	height:12px;
	border-radius:2px;
	background:rgba(0,123,255,0.04);
	border:2px solid rgba(0,123,255,0.32);
}

/* holiday swatch: red accent */
.calendar-legend .legend-paragraph .swatch-holiday{
	box-sizing:border-box;
	width:12px;
	height:12px;
	border-radius:2px;
	background:rgba(229,57,53,0.5);
	border:2px solid rgba(229,57,53,0.5);
	box-shadow:0 6px 10px rgba(229,57,53,0.08);
}

.calendar-legend .legend-paragraph .dot-entry{background:var(--accent);box-shadow:0 6px 10px rgba(4,170,109,0.08)}
.calendar-legend .legend-paragraph .dot-overtime{background:#e53935;box-shadow:0 6px 10px rgba(229,57,53,0.08)}
.calendar-legend .legend-paragraph .dot-complement{background:#1976d2;box-shadow:0 6px 10px rgba(25,118,210,0.08)}
/* diet legend dot: orange */
.calendar-legend .legend-paragraph .dot-diet{background:#ff9800;box-shadow:0 6px 10px rgba(255,165,0,0.08)}
/* jornada extra legend dot: red */
.calendar-legend .legend-paragraph .legend-num.je1{
	color:#c00;
	font-weight:700;
	font-size:0.95rem;
	font-family: inherit;
	display:inline-block;
	vertical-align:baseline;
	margin-right:6px;
}

/* responsive: make paragraph wrap naturally on small screens */
@media (max-width: 780px){
	.calendar-legend .legend-paragraph{white-space:normal}
}