form section{margin-bottom:18px;padding:16px;border-radius:12px;box-shadow: 0 6px 18px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
form section:nth-of-type(odd){background: var(--section-a)}
form section:nth-of-type(even){background: var(--section-b)}
form section:nth-of-type(1){background: var(--section-c);border-color:rgba(255,255,255,0.04)}
form h2{margin:0 0 8px 0;color:var(--text);font-size:1rem}

label{display:block;color:var(--muted);font-size:0.95rem;margin-bottom:6px}
#workDaysField{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;margin:0 0 8px 0;border:none}
#workDaysField legend{margin-right:8px}
#workDaysField label{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-weight:600}

/* Use a check-circle icon for the work days checkboxes inside #workDaysField */
#workDaysField input[type="checkbox"]{
  /* keep input accessible but render a custom SVG circle sized like square checkboxes */
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  border: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 70%;
  cursor: pointer;
  /* empty circle (stroke only) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>");
}
#workDaysField input[type="checkbox"]:checked{
  /* filled accent circle with white checkmark and white border */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%2304AA6D' stroke='%23FFFFFF' stroke-width='1.5'/><path d='M7 12l3 3 7-7' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#workDaysField input[type="checkbox"]:focus-visible{
  outline: 3px solid rgba(4,170,109,0.14);
  outline-offset: 3px;
}

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],select,textarea, .form-control{
  -webkit-appearance: none;
  appearance: none;
  width:100%;
  /* reduced padding and line-height to make inputs less tall */
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.2) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color:#ffffff !important;
  outline: none;
  margin-bottom:8px;
  font-size:15px;
  line-height:1.4;
}

input.bg-white, select.bg-white, textarea.bg-white{ background: rgba(255,255,255,0.2) !important; }
input[type="text"]:hover,input[type="email"]:hover,input[type="password"]:hover,input[type="number"]:hover,input[type="date"]:hover,input[type="time"]:hover,select:hover,textarea:hover{ background: rgba(255,255,255,0.25) !important; }
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,input[type="date"]:focus,input[type="time"]:focus,select:focus,textarea:focus{ border-color: #04AA6D !important; box-shadow: 0 0 0 6px rgba(4,170,109,0.08); }
/* improve placeholder contrast on dark backgrounds */
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.65); }

/* Focus visible styles for keyboard users */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid rgba(4,170,109,0.14);
  outline-offset: 2px;
}

input[type="checkbox"],input[type="radio"]{transform:scale(1.02);margin-right:8px}

/* Replace native checkboxes with toggle icons (img/toggle_off.svg, img/toggle_on.svg)
   Applies to all checkboxes site-wide. Keeps the input element accessible but
   hides the native box and uses background-image to show on/off state. */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 42px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  box-sizing: border-box;
  /* padding defines the outer spacing; background is clipped to the content box
     so any background-color will only fill the interior area of the toggle */
  padding: 2px;
  background-image: url("../img/toggle_off.svg");
  background-repeat: no-repeat;
  background-position: center center;
  /* explicit size so ON and OFF icons share the same dimensions */
  background-size: 86% 86%;
  transition: background-color 200ms ease, background-size 200ms ease, transform 120ms ease, opacity 120ms ease;
  background-color: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background-clip: content-box;
}
input[type="checkbox"]:checked{
  background-image: url("../img/toggle_on.svg");
  /* remove green fill so only the icon is visible (same size as OFF) */
  background-color: transparent;
  background-size: 86% 86%;
  background-clip: content-box;
}
input[type="checkbox"]:focus-visible{
  outline: 3px solid rgba(4,170,109,0.14);
  outline-offset: 3px;
}

input[type="checkbox"]:active{
  transform: scale(0.98);
}

/* Small variant for very compact inline checkboxes: keep them aligned with text */
input[type="checkbox"].compChk, .complement.full-row > label input.compChk{ width: 36px; height:22px; }

.complement{margin-bottom:12px;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow: 0 6px 14px rgba(2,6,23,0.55)}
.complement:nth-child(odd){background: var(--section-a)}
.complement:nth-child(even){background: var(--section-b)}
.complement > label{display:flex;align-items:center;color:var(--text);font-weight:600}
.compBody{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px}
.compBody label{margin:0}
.compBody input, .compBody select{width:100%;}
.compBody input[type="number"]{padding:8px}
.compBody [name$="_name"]{grid-column:1 / -1}

.dietType{display:flex;gap:8px;align-items:center}
.dietType label{min-width:110px;color:var(--muted)}

.compBody[aria-hidden="true"]{opacity:0.6}
input:disabled,select:disabled,textarea:disabled{opacity:0.6}

/* Inline checkbox helper: keep checkbox and label text on a single line */
.inline-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.inline-checkbox input[type="checkbox"]{margin:0 6px 0 0;vertical-align:middle}

/* Restore native checkbox appearance (revert toggles) */
input[type="checkbox"]{
  -webkit-appearance: checkbox;
  appearance: auto;
  width: auto;
  height: auto;
  padding: 0;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: content-box;
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: initial !important;
  transform: none !important;
  cursor: pointer;
}
/* Ensure compact variants also revert */
input[type="checkbox"].compChk, .complement.full-row > label input.compChk{
  width: auto;
  height: auto;
}
/* Work days field: revert to native checkbox visuals */
#workDaysField input[type="checkbox"]{
  -webkit-appearance: checkbox;
  appearance: auto;
  width: auto;
  height: auto;
  background-image: none !important;
}

/* Native square checkboxes should use the project accent when checked */
input[type="checkbox"]{
  accent-color: var(--accent);
}

/* Billing frequency radios (new-project form) should use project accent when selected */
input[type="radio"][name="payDivision"]{
  accent-color: var(--accent);
}

/* Re-style work days checkboxes as circular controls (override revert) */
#workDaysField input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 70%;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23FFFFFF' stroke-width='2'/></svg>") !important;
}
#workDaysField input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%2304AA6D' stroke='%23FFFFFF' stroke-width='1.5'/><path d='M7 12l3 3 7-7' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* Removed mobile input size adjustments (max-width:600px) to avoid form style breakage */

/* Removed inline-checkbox mobile override (max-width:600px) per user request */

/* Make overtime checkbox row span full width inside the inline overtime settings grid
   so long labels (e.g. "Redondear horas extras") don't wrap into multiple lines. */
#overtimeSettingsInline .overtime-checkbox{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
#overtimeSettingsInline .overtime-checkbox .inline-checkbox{
  white-space: nowrap;
}

/* Ensure complement labels keep checkbox and text together on narrow screens */
.complement > label.inline-checkbox{white-space:nowrap}

/* Visual container for the separated 'Configuración de Jornada' section in the Ajustes panel */
.panel-workday-section{
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
  box-shadow: 0 4px 10px rgba(2,6,23,0.35);
}
.panel-workday-section > section{ margin: 0; }
.panel-workday-section .field-group, .panel-workday-section .compBody{ margin-bottom: 8px; }