.config-modal{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:40px;z-index:1200;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 24px)}
.config-modal.hidden{display:none}
.config-modal .config-window{width:880px;max-width:calc(100% - 40px);background:var(--azul-oscuro, var(--panel));border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 30px 80px rgba(2,6,23,0.7);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.config-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:default}
.config-header .drag-handle{cursor:grab;font-weight:700;color:var(--text)}
.config-body{padding:14px;overflow:auto}

/* ensure modal body leaves space for footer/buttons on small screens */
.config-window .config-body{max-height:calc(100vh - 220px)}
.config-actions button{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:8px}
.config-saved{background:rgba(4,170,109,0.12);color:var(--accent);padding:8px;border-radius:8px;margin-bottom:8px}

.config-window{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

@media (max-width:900px){ .config-window{width:calc(100% - 24px);left:50%;top:24px;transform:translateX(-50%);max-height:92vh;padding:12px} }

@media (max-width:420px){
	/* more bottom space and scrollable content so action buttons remain tappable */
	.config-modal{padding:12px;padding-bottom:calc(env(safe-area-inset-bottom, 12px) + 28px)}
	.config-window .config-body{max-height:calc(100vh - 180px)}
}

/* Removed modal mobile (max-width:600px) adjustments to prevent form layout issues */

/* shift modal specific layout: put the two inputs in one row */
.shift-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.shift-row label{display:block;margin-bottom:6px}
.shift-row input{width:100%}

/* helper for making each field in the row grow and keep input styles */
.shift-row .shift-field{display:flex;flex-direction:column;flex:1 1 120px;min-width:120px;box-sizing:border-box}
.shift-row .shift-field input{width:100%;}

/* shift type buttons */
.shift-flags{display:flex;gap:12px;margin-top:8px;align-items:center;justify-content:center}
.shift-flags .flag-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600}

/* small time inputs used for HH:MM displays */
.time-small{max-width:120px;padding:8px 10px;font-size:15px;text-align:center;border-radius:8px;background:rgba(255,255,255,0.12);box-sizing:border-box;border:2px solid transparent}
.time-small[readonly]{cursor:default}

/* overtime highlight: red border without changing layout and stronger contrast */
.time-small.overtime-flag{border:2px solid rgba(220,50,50,0.95) !important;box-shadow:none !important}
/* make overtime highlight clearly visible against white typography */
.time-small.overtime-flag{background:rgba(220,50,50,0.12) !important;color:#0b0b0b !important}

/* day type button styles and active colors */
.shift-type-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;padding:14px 18px;border-radius:10px;background:rgba(255,255,255,0.03);color:var(--text);font-weight:700;font-size:16px;min-width:140px;transition:transform 120ms ease,box-shadow 160ms ease,filter 160ms ease,background 150ms ease;margin:6px}
.shift-type-btn:hover{transform:translateY(-1px);filter:brightness(1.02);background:rgba(255,255,255,0.06)}
/* unified active highlight: use translucent color background (no shadow) so size doesn't change */
.shift-type-btn.type-completa.active{background:rgba(0,128,0,0.18);color:#fff;border-color:rgba(0,128,0,0.18)}
.shift-type-btn.type-media.active{background:rgba(255,165,0,0.18);color:#fff;border-color:rgba(255,165,0,0.18)}
.shift-type-btn.type-libre.active{background:rgba(255,255,255,0.18);color:var(--text);border-color:rgba(255,255,255,0.18)}
.shift-type-btn.type-viaje.active{background:rgba(0,123,255,0.18);color:#fff;border-color:rgba(0,123,255,0.18)}

/* small settings button next to inputs */
.settings-btn{display:inline-flex;align-items:center;justify-content:center;padding:18px 16px;border-radius:8px;border:0;background:rgba(255,255,255,0.06);color:var(--text);cursor:pointer;box-sizing:border-box}
.settings-btn svg{display:block}
.settings-btn:hover{background:rgba(255,255,255,0.08)}
.settings-btn img{display:block;max-height:24px;width:auto}

/* smaller settings modal width */
#overtimeSettingsModal .config-window{width:420px;max-width:calc(100% - 28px)}
#overtimeSettingsModal .config-body{padding:12px}
#overtimeSettingsModal label{font-weight:600;color:var(--text);display:block}
#overtimeSettingsModal label span{font-weight:600;color:var(--text)}
#overtimeSettingsModal .small-number{width:72px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.08);color:var(--text);box-sizing:border-box}
#overtimeSettingsModal label{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%}
#overtimeSettingsModal label span:first-child{flex:1}
#overtimeSettingsModal .small-number{width:72px;padding:6px 8px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.08);color:var(--text);box-sizing:border-box}
#overtimeSettingsModal label span:last-child{margin-left:6px;opacity:0.85;flex:0 0 auto}
#overtimeSettingsModal .overtime-checkbox{margin-top:8px}
#overtimeSettingsModal .overtime-checkbox label{font-weight:600;color:var(--text);gap:8px}
/* Inline overtime settings for new-project: three-column layout (texto fijo, input, 'min') */
/* Adjust inline structure: select the row DIVs inside #overtimeSettingsInline (matches current HTML) */
#overtimeSettingsInline {
	max-width: 450px;
	padding-right: 12px; /* evita que los números se salgan del contenedor */
	box-sizing: border-box;
	overflow: hidden;
}

#overtimeSettingsInline > div {
	display: grid !important;
	grid-template-columns: 260px 60px 40px; /* Texto fijo, input pequeño, 'min' */
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	width: 100%;
}

#overtimeSettingsInline > div label {
	grid-column: 1 / 2;
	margin: 0;
	line-height: 1.2;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#overtimeSettingsInline > div input.small-number,
#overtimeSettingsInline > div input[type="number"] {
	grid-column: 2 / 3;
	width: 60px;
	max-width: 100%;
	height: 32px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.06);
	background: rgba(255,255,255,0.08);
	color: var(--text);
	text-align: center;
	box-sizing: border-box;
}

#overtimeSettingsInline > div span {
	grid-column: 3 / 4;
	font-size: 13px;
	opacity: 0.7;
	text-align: left;
}

/* Removed overtime settings mobile responsive block (max-width:600px) per user request */

/* make input-with-btn a centered flex container and force matching heights */
.input-with-btn{display:flex;align-items:center}
.input-with-btn input[type="time"], .input-with-btn .settings-btn {
	min-height: calc(2 * 15px + 1em - 2px); /* slightly smaller to reduce 2px */
	height: auto;
	vertical-align: middle;
}