/* Misma lección que en `panel.css .scanner-modal [hidden]`: una regla de autor
   con `display` (aquí `.fml-form{display:grid}` y
   `.fml-editable-date{display:inline-flex}`) gana al `[hidden]` de la hoja del
   navegador. Sin esta línea, `hidden = true` desde el JS no ocultaba nada: el
   formulario de corrección de la fecha de inicio salía siempre desplegado y el
   botón «Desde» seguía visible, así que el toggle no se veía nunca. */
#fleet-driver-medical-leave-modal [hidden] {
  display: none !important;
}

#fleet-driver-medical-leave-modal .fleet-medical-leave-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

#fleet-driver-medical-leave-modal .fml-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

#fleet-driver-medical-leave-modal .fml-icon { font-size: 22px; }

#fleet-driver-medical-leave-modal .fml-kicker {
  color: var(--text3);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#fleet-driver-medical-leave-modal .fml-subtitle {
  color: var(--text2);
  font-size: 12px;
  margin: -10px 0 16px;
}

#fleet-driver-medical-leave-modal .fml-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

#fleet-driver-medical-leave-modal .fml-summary > div {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

/* Solo la etiqueta de la celda (`> div > span`). Sin acotarlo, el icono ✎ del
   botón editable heredaba tamaño 11px, color apagado y `margin-bottom`, y se
   veía como otra etiqueta descolgada dentro del propio botón. */
#fleet-driver-medical-leave-modal .fml-summary > div > span {
  color: var(--text3);
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}

#fleet-driver-medical-leave-modal .fml-editable-date {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(255, 229, 138, .6);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  gap: 5px;
  padding: 0 0 2px;
}

#fleet-driver-medical-leave-modal .fml-editable-date:hover,
#fleet-driver-medical-leave-modal .fml-editable-date:focus-visible {
  border-bottom-color: var(--yellow);
  color: #ffe58a;
  outline: none;
}

#fleet-driver-medical-leave-modal .fml-start-edit-form {
  background: rgba(246, 201, 14, .06);
  border: 1px solid rgba(246, 201, 14, .24);
  border-radius: 10px;
  margin: 0 0 14px;
  padding: 12px;
}

#fleet-driver-medical-leave-modal .fml-evidence {
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

#fleet-driver-medical-leave-modal .fml-policy {
  background: rgba(246, 201, 14, .08);
  border-left: 3px solid var(--yellow);
  border-radius: 7px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 16px;
  padding: 11px 12px;
}

#fleet-driver-medical-leave-modal .fml-form {
  display: grid;
  gap: 7px;
}

#fleet-driver-medical-leave-modal .fml-form label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}

#fleet-driver-medical-leave-modal .fml-form label span {
  color: var(--text3);
  font-weight: 400;
}

#fleet-driver-medical-leave-modal .fml-form input,
#fleet-driver-medical-leave-modal .fml-form textarea {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  padding: 9px 10px;
}

#fleet-driver-medical-leave-modal .fml-form textarea { resize: vertical; }

/* Selector de tipo de ausencia (baja médica / paternidad). Pills con radio
   nativo dentro: accesible con teclado sin JS extra y coherente con el resto
   del modal. `.fml-form input{padding:9px 10px}` aplicaría también a los radios
   y los deformaría, así que aquí se restablece su tamaño. */
#fleet-driver-medical-leave-modal .fml-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

#fleet-driver-medical-leave-modal .fml-type-option {
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 8px 14px;
}

#fleet-driver-medical-leave-modal .fml-type-option input[type="radio"] {
  accent-color: var(--yellow);
  margin: 0;
  padding: 0;
  width: auto;
}

#fleet-driver-medical-leave-modal .fml-type-option:has(input:checked) {
  background: rgba(246, 201, 14, .12);
  border-color: rgba(246, 201, 14, .55);
  color: #ffe58a;
}

#fleet-driver-medical-leave-modal .fml-type-option:focus-within {
  outline: 2px solid rgba(246, 201, 14, .5);
  outline-offset: 2px;
}

#fleet-driver-medical-leave-modal .fml-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

#fleet-driver-medical-leave-modal .fml-error {
  background: rgba(255, 92, 92, .1);
  border: 1px solid rgba(255, 92, 92, .35);
  border-radius: 9px;
  color: #ffc0c0;
  line-height: 1.45;
  padding: 12px;
}

/* Feedback in-page del propio módulo: el dashboard Fleet no define ningún
   toast global (`showFleetToast`/`showToast` no existen ahí) y los popups
   nativos están prohibidos. Sin esto, un error de la API era invisible. */
#fleet-driver-medical-leave-toast {
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 24px));
  position: fixed;
  right: 18px;
  z-index: 4000;
}

#fleet-driver-medical-leave-toast .fml-toast {
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  padding: 11px 14px;
}

#fleet-driver-medical-leave-toast .fml-toast-success {
  background: rgba(34, 211, 160, .14);
  border: 1px solid rgba(34, 211, 160, .45);
  color: #a9f2dc;
}

#fleet-driver-medical-leave-toast .fml-toast-error {
  background: rgba(255, 92, 92, .14);
  border: 1px solid rgba(255, 92, 92, .45);
  color: #ffc0c0;
}

/* `.manager-truck-card .manager-vacations-btn` (0,2,0) se inyecta desde
   driver_vacations_list_modal.js. Con un solo selector de clase el botón
   médico perdía SIEMPRE el color y se veía idéntico al de vacaciones. */
.manager-truck-card .manager-vacations-btn.manager-medical-leave-btn {
  background: rgba(246, 201, 14, .1);
  border: 1px solid rgba(246, 201, 14, .35);
  color: #ffe58a;
}

.manager-truck-card .manager-vacations-btn.manager-medical-leave-btn:hover {
  background: rgba(246, 201, 14, .18);
  border-color: rgba(246, 201, 14, .65);
}

@media (max-width: 560px) {
  #fleet-driver-medical-leave-modal .fml-summary { grid-template-columns: 1fr; }
  #fleet-driver-medical-leave-modal .fml-actions > * { flex: 1 1 100%; }
}